How do I create hide/show text on a page, like you see with FAQs?

See newly posted answer for 2 tier open/close using h1 and h2

2 tier open/close using h1 and h2 in a markdown block

First, the markdown

# + This is an item

This is the first line of an answer to the question above. This is a second line of the answer. 

* Bullet points
* Can be used too

## + This is subitem 1

Subitem 1 copy

## + This is a second subitem

Some copy for the second subitem

# + This is a second item

Here is subsection content

# + This is a third item

It also has content

# + This is a fourth item

This is a one line answer to the question above. 

An h1 ( single # ) represents a folder

An h2 ( double # ) represents a subfolder.

The jQuery script is as follows:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<script>$(document).ready(function(){

/* Setup cursors to show over h1 & h2 */
$('.markdown-block .sqs-block-content h1, .markdown-block .sqs-block-content     h2').css('cursor','pointer');

/* Close h1s and h2s to begin with */
$('.markdown-block .sqs-block-content h1').nextUntil('h1').slideUp();

/* Open clicked h1 and close all others*/ 
$('.markdown-block .sqs-block-content h1').click(function () {
$('.markdown-block .sqs-block-content h1').nextUntil('h1').slideUp();
$(this).nextUntil('h1').slideDown();
/* But we need to force the subfolders to close  */
$('.markdown-block .sqs-block-content h2').nextUntil('h2, h1').hide();
/* Also disable pointer events for just this h1*/
$('.markdown-block .sqs-block-content h1, .markdown-block .sqs-block-content h2').css('pointer-events','auto');
$(this).css('pointer-events','none');

});
/* Toggling for h2 folders */ 
$('.markdown-block .sqs-block-content h2').click(function () {
$(this).nextUntil('h2, h1').slideToggle();
});

});
</script>

^^^^ This made my head hurt until I hit on the idea of closing all but the clicked on folder.

Actually.. ..if you click on an already expanded h1 it closes then opens again.. ..will have a think about how to fix it.

Code above now amended. By default, once a top level folder is open it has its click event removed so you can only close it by opening another top level folder, at which time the first folder becomes clickable again.

You're an absolute hero. Thank you so much for your help!

@silvabokis

It only took me about 60 seconds to fix, But i noticed your code was missing this bit from the from, it didn't work for me till i added this part back on. Just in-case this is useful for anybody else reading.. this piece of code needs to be added to the start of the code injection.

Ah yes.. ..I forgot it because I have the jQuery script reference in the sitewide header.

I like the Markdown approach but how do I insert an image as the body of the expandable portion instead of just text?

I like the markdown approach but how do I insert an image as the body of the expandable portion instead of just text?

I have a question for @Bernard West : As part of the answer that comes down when I click on the question, I would like an image to appear that I have save on my computer. Is it possible to do that? How exactly would I code that in?Thank you!

@Bernard West : I tried to copy and paste all of the script for questions 1-3 and continue with questions 4-6, but the expand and collapse function is only working for the first three questions. I tried looking at the script that I put into the footer but I can't see any pattern in it.

Can you help? Please?

Been trying to figure this out and playing around with the code, but could multiple levels of colapse be integrated with h2 as the bottom level and then with varying levels of bullets?

Here's the page in question (yes it's in French, but you get the big picture)

http://www.ameliorerlessoins.org/psychiatrie-1

@mbmorandi,

The problem here is in the HTML, not the JavaScript. Each of your questions and answers has an id tag like id="Q1" or id="A1". If you just copy and paste the code from the first 3 questions, your fourth question will reference the id you pasted and will open that question. So for each of your additional questions after Q3, make sure you change the ids to match - Question 4's id should be id="Q4" and the onclick="expand A4" while the Answer 4's id should be id="A4". You have to change these by hand for each new question you add to the FAQ.

Thank you, it was simple and looks great.

@Bernard West: Do you know how to get the image to change when the answer is open vs when it is collapsed? I tried to get this to happen with a script, but it only works for my first question - if I click on subsequent questions the first image changes but not the one clicked on. Site is www.lyonsfarmette.com/faq. Again, that first quesiton works but the others don't. I'm assuming this is an id problem?

Yeah it will be. I'll try and get back to this later to have a look at it. If I don't, it might be a week or so before I can get to it. Got to travel to a funeral on the other side of the country leaving tomorrow.

Off the top of my head, what you'd need to do is add some code inside the if/else (state.collapsed) block, to change the image to the new/correct one for each branch of that if/else block. To change the image you'll need to get the element with code and change it's 'scr' attribute.

@Bernard-West Thank you for providing this code! It has been incredibly helpful. Can you please recommend how to update the arrow image. You mention in your post that we should update to our own image, but I'm not sure how to do that.

Thank you for your help.

@silvabokis thank you! I used the original instructions and first code you provided and this worked for me. However, I used it on a page that is part of an index and when I go to that page through the main index page it no longer works. Have you/anyone experienced this?

Hi @LizzyN ... In my code where I write:

You need to change what's between the single quote marks after src=

So, for example, your image might be .... src='http://yourimage.com/yourimage.jpg' ...

@silvabokis yes I am having the same problem as Nicole. is there something we can change in the script to make it work within an index?

Wow. Long thread. Maybe it's easier to answer THIS question by answering MY question:

How-to-tweak-this-code-4-hideshow-a-text-toggle

I’m using the Markdown Block/jQuery method very kindly offered by silvabokis for a collapsible/expandable FAQ.

Has anyone tried making a version of this with more obviously clickable symbols instead of the plus signs at the beginning of each line? Maybe some sort of arrow icon, to show that it can be expanded?

It would be extra nice if that icon changed when clicked too (for example a plus sign button icon changing to a minus sign button, or a down arrow changing to and up arrow to show that it can be folded back up).

Any ideas?

@silvabokis thank you for posting this, unfortunately it is not working for me. I keep getting the markdown looking like this, what am i doing wrong?,@silvabokis

@Bernard West - thanks I used your html code solution below and now have a FAQs page with zero html/coding knowledge :) Just a couple of questions - 1. I removed the first h2 reference because I didn't want the Q in Heading format. I'd actually just like it in Bold if that's possible? 2. I'd like to create some links within the Answer text to other pages - either external or my own - possible? I tried the markdown solution from @silvabokis, just couldn't get it to work - shame because the html method for 93 FAQs took FOREVER!thanks both :) any additional help appreciated!

Hey guys, I just lost hope, trying to resolve this - the list expands on page load and I have to click elements to collapse it. Any ideas what the problem might be? Thanks @Bernard West