-1

I'm having a bit of trouble figuring out what Crazy Egg used for their F.A.Q.s. I would like to implement the same thing exactly (where the questions slide down upon clicked - and show a blue box for the current active question).

Ex) https://www.crazyegg.com/help

I went through the code and I see it has javascript events, but I am unable to script this myself. Is there a plugin I can use for this behavior? Some form of showing/hiding divs I presume?

Aletheios
  • 3,960
  • 2
  • 33
  • 46
Chatyak
  • 183
  • 1
  • 1
  • 11

2 Answers2

0

You should be able to code it yourself with jquery. Just look into very basic jQuery tutorial that goes over selectors, hiding and showing and click events. All you do is assign an id to each header that you click on, and then on click you hide all content and show the one clicked. You should read some stuff online, try something, and then come back with code and ask questions.

bobek
  • 8,003
  • 8
  • 39
  • 75
0

This effect can be achieved easily with jQuery's slideToggle function:

HTML:

<span class="faq">This is a FAQ question...</span>
<div class="answer" style="display: none;">
    And this is the answer.
</div>

JavaScript:

$(document).ready(function(){
    $(".faq").click(function(){
        $(this).next("div.answer").slideToggle();
    });
});


JSFiddle: http://jsfiddle.net/ySahP/

Aletheios
  • 3,960
  • 2
  • 33
  • 46