Toggle Effect

[hghar33b]

I'm looking for a simple toggle effect to use on a website, for the FAQ section. Basically just to toggle a group of text when the user clicks on a question.

I found a jQuery and CSS tutorial for a simple toggle that I thought would work but didn't.

Any help is appreciated.

Many thanks.

[BGM]

what tech is the site running? php, asp.net, just html?

there are a number of ways this could be done..

[hghar33b]

what tech is the site running? php, asp.net, just html?

there are a number of ways this could be done..

It's PHP based on WordPress.

[Cupcakes]

If you don't mind prototype: http://www.p51labs.com/accordion/

jQuery Slickbox: http://www.learningjquery.com/2006/09/slicker-show-and-hide

http://jquery.bassistance.de/accordion/demo/

http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/

http://plugins.jquery.com/project/accordion

[RoomKid]

Here are a few recent tutorials

http://tutorialzine....ql-google-docs/

http://davidwalsh.name/jquery-sliders

[hghar33b]

Thanks so much. We tried these tutorials. Unfortunately we came across some issues, even though some worked (but with flaws.)

Any ideas how we can ensure that it works within a WordPress page?

[Cupcakes]

You'll have to check for compatibility with whatever other WordPress plugins you've got. By default WP uses jQuery so my suggestion for Prototype, I would toss out. You'll want to stick with jQuery only.

If you still can't get it to work (you should if you tried to ensure compatibility), then just use an FAQ plugin. http://tribulant.com/plugins/view/8/wordpress-faq-plugin

[Mattytommo]

can you not just use raw JavaScript for this? Like:

var textboxToChange = document.getElementById("textboxtochangeid");

if(textboxToChange != null)
{
    textboxToChange.onclick = function() { textboxToChange.value = "new text to change this to"; };
}

[Rob Veteran]

Here's a nice simple one I did for a client. Includes an 'expand all' and 'collapse all' button.

HTML:

<p>Select any question to expand its answer. <a href="#" id="expand">expand all</a> · <a href="#" id="collapse">collapse all</a></p>
<h2>How long will my order take?</h2>
<div class="indent">
	<p>Depending on availability, please allow 10 to 12 working days from receiving your order to dispatch.</p>
</div>
<h2>How long does it take to create a bespoke artwork?</h2>
<div class="indent">
	<p>Depending on the illustration chosen and time of year, a personalised print can take from 2 to 4 weeks, from briefing to completion.</p>
	<p>Please ensure that you send the correct copy that you wish to appear in the illustration.</p>
</div>				

jQuery:

$(document).ready(function() {
	$("h2").click(function() { $(this).toggleClass("active").next("div").toggle(); });
	$("#collapse").click(function() { $("div.indent").hide(); $("h2.active").removeClass("active"); return false; })
	$("#expand").click(function() { $("div.indent").show(); $("h2").addClass("active"); return false; });
});

CSS:

h2 { cursor:pointer; color:#881260; }
h2.active { color:#333; }
div.indent { padding-left:20px; display:none; }

All together in a sample page for you:

http://isrob.com/clients/neowin/faq.htm

[Plarkster]

@Rob the sample page doesn't work in Chrome :cry:

The expand/collapse all does, but clicking on the questions doesn't do anything.

[Rob Veteran]

Typo with my closing tags. Fixed.

[Plarkster]

Nice one! Might come in handy.

[RoomKid]

Took a few minutes to whip up something small for ya but looks like Rob did it already

http://content.manmohanjit.com/uploads/neowin/faq/

Download it here: http://content.manmohanjit.com/uploads/neowin/faq/download.zip

[Elliott]

I did a pretty complicated, accordion-like (when you click another question, the previously expanded one is collapsed) one for a client.

JS:

jQuery.fn.hideFaq = function() {
  var $div = $(this).next(".paragraphs");

  $(this).removeClass("expanded").addClass("collapsed");
  $div.animate({ height: 0 }, { complete: function() {
    $div.hide();
  }});
}

jQuery.fn.showFaq = function() {
  var $div = $(this).next(".paragraphs");

  $("#mainContent h3.expanded").hideFaq();
  $(this).removeClass("collapsed").addClass("expanded");
  $(this).next(".paragraphs").show().animate({ height: $div.data('height') });
}

$(document).ready(function() {
  $("#mainContent h2").each(function() {
    if ($(this).html().match(/faqs/i)) {
      $(this).nextUntil("h2").filter("h3").each(function() {
        $(this).addClass("collapsed").nextUntil("h2, h3").wrapAll('<div class="paragraphs"></div>');
        $(this).next(".paragraphs").each(function() {
          $(this).data('height', $(this).height()).hide().css({ height: 0 });
        });
        $(this).click(function() {
          if ($(this).is(".expanded")) {
            $(this).hideFaq();
          } else {
            $(this).showFaq();
          }
        });
      });
    }
  });
});

With this, the client didn't have to do any special wrapping divs or even assign an id to the FAQs header in the CMS (using Textile as a parser). They just have to do an H3 to start the next question or an H2 to start another larger section. This code is very specific to the situation, but it could be made more abstract. I could also probably clean it up a lot, but it was one of my first jQuery jobs. :blush:

I also put together my own slider that stores the height of the element before it's hidden and then animates to that height when it's called upon. The default jQuery slideDown and slideUp are fairly jerky when line-height is involved. It wouldn't work if you dynamically inserted content while the DIV wasn't visible, but that wasn't something I had to watch out for.

You can see this in action at http://hmrnational.com/auditguard/enhance-your-revenue/ if you want. I don't really feel like putting together an example document. :p