FAQ section

Is it possible to add an FAQ section like http://demo.gavick.com/joomla25/events/#gkBottom5 ?

I used the gk-faq from the events/gkstuff.css and add this to override.css at my own domain.

Then I used the following code but it doesn't work.

Code: Select all

<div class="gkCols" data-cols="2">
          <div>
                    <dl class="gk-faq">
                              <dt data-scroll-reveal="enter left and wait 0s">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dt>
                              <dd>
                                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              </dd>
                              <dt data-scroll-reveal="enter left and wait 0.2s">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dt>
                              <dd>
                                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              </dd>
                              <dt data-scroll-reveal="enter left and wait 0.4s">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dt>
                              <dd>
                                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              </dd>
                    </dl>
          </div>
          <div>
                    <dl class="gk-faq">
                              <dt data-scroll-reveal="enter right and wait 0s">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dt>
                              <dd>
                                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              </dd>
                              <dt data-scroll-reveal="enter right and wait 0.2s">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dt>
                              <dd>
                                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              </dd>
                              <dt data-scroll-reveal="enter right and wait 0.4s">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dt>
                              <dd>
                                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              </dd>
                    </dl>
          </div>
</div>

Hi

I think You have missed the javascript for ths part of the code. Can You please show me the site so I'll make sure.

Hi,

This is the url.

http://funkiej.nl/faq

Hi

Just as I thought. You are missing a script adding and removing class "active". Try add this to gk.scripts.js

Code: Select all

   // FAQ
   jQuery('.gk-faq').each(function(i, faq) {
      var dt_list = jQuery(faq).children('dt');
      dt_list.each(function(i, dt) {
         dt = jQuery(dt);
         dt.click(function() {
            dt_list.each(function(j, dt_element) {
               if(i !== j) {
                  jQuery(dt_element).removeClass('active');
               }
            });
            dt.toggleClass('active');
         });
      });
   });


Tnx for the reply, but sadly it still doesn't work.

Did I miss something?

I also tried the gkTogglers from BluApp template but this doens't work either.

I've add this to gk.scripts.js

Code: Select all

 // togglers
    jQuery('.gkTogglers').each(function(i, toggler) {
       toggler = jQuery(toggler);
       var dts = toggler.find('dt');
       var dds = toggler.find('dd');
       var current = false;

       dts.each(function(i, item) {
          item = jQuery(item);
          item.click(function() {
             if(!item.hasClass('active')) {
                dts.removeClass('active');
                item.addClass('active');

                var h = jQuery(dds[i]).prop("scrollHeight");
                jQuery(dds[i]).animate({
                   'opacity': 1,
                   'height': h
                }, 400);

                if(current !== false) {
                   jQuery(dds[current]).animate({
                      'opacity': 0,
                      'height': 0
                   }, 400);
                }

                current = i;
             } else {
                item.removeClass('active');

                var h = jQuery(dds[i]).prop("scrollHeight");
                jQuery(dds).animate({
                   'opacity': 0,
                   'height': 0
                }, 400);

                current = false;
             }
          });
       });
    });


and this to override.css

Code: Select all

/* Togglers */
.gkTogglers {
   border: 1px solid #e1e1e1;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   padding: 0 32px;
}

.gkTogglers dt {
   border-top: 1px solid #e1e1e1;
   color: #222;
   cursor: pointer;
   font-size: 18px;
   font-weight: 400;
   line-height: 75px;
   margin: 0 -32px;
   padding: 0 32px 0 54px;
}

.gkTogglers dt:first-child {
   border-top: none;
}

.gkTogglers dt:before {
   color: #dfdfdf;
   content: "\f0da";
   font-family: FontAwesome;
   left: -20px;
   position: relative;
}

.gkTogglers dt.active,
.gkTogglers dt.active:before,
.gkTogglers dt:hover:before {
   color: #dd5749;
}

.gkTogglers dd {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   color: #777;
   font-size: 15px;
   height: 0;
   opacity: 0; filter: alpha(opacity=0);
   overflow: hidden;
   padding: 0;
}

.gkTogglers dd p {
   margin: 0;
   padding: 0 0 24px 0;
}


For example see here at the bottom

Hi

Just try the easiest possible and add this to gk.script.js

Code: Select all

$('.gk-faq dt').click(function(){ $(this).toggleClass('active') });


Hi,

Unfortunaly it still doesn't work

Hi

Just try the easiest possible and add this to gk.script.js

Code: Select all

$('.gk-faq dt').click(function(){ $(this).toggleClass('active') });


Hi

Please send me an access to ftp.

Hi

gk.scripts.js was not the best palce to put it. I've added it to /layout/blocks/head.php and look like it's working.

Hi

gk.scripts.js was not the best palce to put it. I've added it to /layout/blocks/head.php and look like it's working.

Wow tnx a lot m8!

Can the border be more like the gkTogglers I put below the gkFaq? Now it's pretty wide



tnx in advance.

Hi

gk.scripts.js was not the best palce to put it. I've added it to /layout/blocks/head.php and look like it's working.

Wow tnx a lot m8!

Can the border be more like the gkTogglers I put below the gkFaq? Now it's pretty wide


tnx in advance.

And oh, I also want the triangle like the Toggler instead of the letter M (inactive) and K (active). Is this possible?

never mind, I already figured it out

Hi

Ok. Great to hear that

If u look at my site at your mobile phone there are a lot of white spacers between the faq headers



the view is good when u look it on the pc *click*

can this be fixed?

Hi

Please try adding this to mobile.css:

Code: Select all

.gk-faq dd p {
    margin: 0;
    opacity: 1;
}


Now the text is already unfolded, you don't have to click on it anymore...

Hi

Yes it is. I thought it's more propper for mobile this way, but if You want to have it as before with a fix for gaps please send me the new access to ftp. The old one You gave me is not wokring already.

Hi,

The old one is working again

Hi

Is it working without doing anything ? That's odd Anyway I'm glad it's ok.

nah, I've had to activate it again

Hi

Ok. I'm offically confused So is it ok or not ? Do You need me to investigate this further or can I close this thread ?

haha..sorry for all the confusion.

It's still not ok, but the FTP login is activated again so you can do your magic

Hi

I've added this code in mobile.css:

Code: Select all

.gk-faq dt + dd > p {
    display: none;
}

.gk-faq dt.active + dd > p {
    display: block;
}


It lost the scroll effect, but this is the only way I can think of with the way it's codded right now.

tnx m8. no worries 'bout the scroll effect.

tnx!

Hi! )
I was looking for an opportunity to make in a template "University", module from the template "Events".
I was able to deal with styles and file gk.script.js
but I do not know php. For for me was a mystery where in the file "head.php" I have to put the code

Code: Select all
$('.gk-faq dt').click(function(){ $(this).toggleClass('active') });


Can you help me ?

Hi

This part of the code is a javascript so any place outside <?php ?> tags is fine, but please remember that You need to use jQuery tags around it.

<script type="text/javascript">(function($) {$(document).ready(function() {
.............
});})(jQuery)</script>