Hiding a span in an accordion

Question

I need help in hiding/unhiding neighboring spans. I'm building a series of FAQs using an accordion structure. I need to have each question truncated by default, but when clicked, the question must then appear in full. Finally, when the open FAQ (or another one) is clicked, the question should return to its truncated form.

My markup is of this form - where I have placed a truncated version of the question in one span and the untruncated version in a neighboring span:

> <div class="accord"><h4><span class="shortver">What steps do I need to
> take to ...</span><span class="longver hide">What steps do I need to
> take to install a constructed wetland?</span></h4><div
> class="faqcontent">Answer goes here</div>...</div>

The following function controls the FAQ:

function fnSetUpPageFAQAccordion(){
  $(".accord > div").hide();
  $(".accord > h4").click(function(){           
  $(this).find('span.shortver').addClass("hide").next('span.longver').removeClass('hide');
  $(this).toggleClass("close").siblings("h4.close").removeClass("close");
  $(this).next("div").slideToggle("1500").siblings("div:visible").slideUp("1000");return;
  }); };

This code closes the truncated version of the question and opens the full version when the FAQ is clicked. What I can't figure out is how to reverse that sequence when the FAQ is clicked again (or another FAQ on the page is clicked).

Any suggestions - perhaps there is a better approach altogether?

Thanks/Bruce

Answer 1

Here's a slightly different approach, and a solution. I think you could simplify this. Instead of having 1 span with the short version and 1 with the long version, put the beginning of the explanation in the first (let's call it class="questionStart")and the rest of it in the second (class="questionEnd"). That way you can leave the beginning always visible and only worry about toggling the class on the second. This is simpler but you'd need to remove the '...' which may not be worth it for the readability loss.

To address your issue of hiding the element when clicking something else, try adding an onClick event that first adds the hide class to all of the "questionEnd" spans, then toggles it on for just the one you've clicked on. I haven't tried it but I think you could make that work pretty easily either with your original approach or with mine.