Show/Hide div but show a few on page load

Question

I regularly have show/hide elements for things like FAQ's and use the following code:

HTML:

<div class="faq">
    <h2 class="faq_q toggle-section">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>

JS:

// Show / Hide Sections
$(".toggle-section").next(".content-section").hide();
$(".toggle-section").click(function() {
   $(this).toggleClass('active').next().slideToggle("fast");
});

Which works well but on this occasion I need a few selected questions on page load but I just can't figure out what I need to do in order for that to happen.

Any help would be very much appreciated.

Hi Alan, need more information here. As of now you don't show any FAQ on page load.right? — Rishu Ranjan, May 15 '20 at 08:39
Currently, only the Question (faq_q) show on page load. The answers (faq_a) are not displayed until the user clicks the question. What I would like is for a few questions and answers to be displayed on page load, maybe by adding a Class to the faq div or similar? — Alan, May 18 '20 at 13:10

matthias_h · Answer 1 · 2020-05-18T15:04:46.583

You could do it like this: Generate an array with the numbers of all FAQs, get a random number out of this array and show the FAQ with this number. In this example 2 out of 6 FAQs are shown.

$(".faq").hide();
var Show = 2, 
    Faq = $(".faq").length, 
    array = [], 
    rnd, value, i;

for (i = 0; i < Faq; i++) { 
  array[i] = i;
}

for (i = 0; i < Show; i++) { 
  rnd = Math.floor(Math.random() * array.length); 
  value = array.splice(rnd,1)[0]; 
  $(".faq:eq(" + value + ")").show();
}

// Show / Hide Sections
$(".toggle-section").next(".content-section").hide();
   $(".toggle-section").click(function() {
   $(this).toggleClass('active').next().slideToggle("fast");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 1</h2>
    <div class="faq_a content-section">Answer 1</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 2</h2>
    <div class="faq_a content-section">Answer 2</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 3</h2>
    <div class="faq_a content-section">Answer 3</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 4</h2>
    <div class="faq_a content-section">Answer 4</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 5</h2>
    <div class="faq_a content-section">Answer 5</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 6</h2>
    <div class="faq_a content-section">Answer 6</div>
</div>

For this answer I incorporated this answer given by gonchuki.

Update: As clarified in the comments to this answer, the request is to already show some selected answers upon page load. In case these answers should be shown randomly, it's possible to adjust the previous example like this:

$(".toggle-section").next(".content-section").hide();
   $(".toggle-section").click(function() {
   $(this).toggleClass('active').next().slideToggle("fast");
});
var Show = 2, 
    Faq = $(".faq").length, 
    array = [], 
    rnd, value, i;

for (i = 0; i < Faq; i++) { 
  array[i] = i;
}

for (i = 0; i < Show; i++) { 
  rnd = Math.floor(Math.random() * array.length); 
  value = array.splice(rnd,1)[0]; 
  $(".toggle-section:eq(" + value + ")").toggleClass('active').next().slideToggle("fast");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 1</h2>
    <div class="faq_a content-section">Answer 1</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 2</h2>
    <div class="faq_a content-section">Answer 2</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 3</h2>
    <div class="faq_a content-section">Answer 3</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 4</h2>
    <div class="faq_a content-section">Answer 4</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 5</h2>
    <div class="faq_a content-section">Answer 5</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question 6</h2>
    <div class="faq_a content-section">Answer 6</div>
</div>

I think what he is asking is to have the answers already shown when the page is loaded, and then being able to toggle them. — Leo, May 15 '20 at 11:09
@Leo Possible, I just understood "I need a few selected questions on page load" in a different way. We'll see when Alan returns to the question and notices the given answers. — matthias_h, May 15 '20 at 11:21
So sorry I didn't reply sooner. I didn't get an email notification to let me know somebody had replied. Really appreciate your help with this. @Leo is correct. I would like all FAQ's closed (only the question showing) but have a selected few open on page load. — Alan, May 18 '20 at 12:48
@Alan Thanks for clarification. I've updated my answer with an approach to show randomly selected answers open on page load. — matthias_h, May 18 '20 at 15:06
@matthias_h Sorry, not sure if I'm explaining myself clearly. What you've done is great but what I need is to be able to select which FAQs are open on page load, rather than random FAQs being open. The way I thought of doing this is if I had a Class of "selected" on the "faq" class, so I could then simply add that Class and those would be open on page load, but still then show/hide when clicked. — Alan, May 18 '20 at 16:09
@Alan Ah ok, in this case Leo's answer should be the right one. — matthias_h, May 18 '20 at 16:20

Leo · Accepted Answer · 2020-05-19T09:05:46.173

So you are looking for having some questions already toggled right? Which means in the HTML they should already have the "active" class and then toggle them, in this case you have several options, it depends on how you want to approach it, either you could add the active class already in the HTML before the page loads for the ones you want to have them shown, and then search for the active class and make the toggle.

// Show / Hide Sections
//This next line will always be executed, should be in the CSS as .content-section{ display: none;}
$(".toggle-section").next(".content-section").hide();


$(".toggle-section").click(function() {
    $(this).toggleClass('active').next().slideToggle("fast");
});

//Now you could either trigger the click of the elements which have an "active" class like this:

$('.toggle-section.open').each(function(){
    $(this).click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
    <h2 class="faq_q toggle-section">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section open">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>
<div class="faq">
    <h2 class="faq_q toggle-section open">Question</h2>
    <div class="faq_a content-section">Answer</div>
</div>

Really appreciate this. Works really well but the only issue is that divs that I have added the "active" class to, then that "active" class is removed when I toggle (close) the expanded div. So what is happening is the "active" class is getting removed when open. Works perfectly on the other divs that are closed on page load. — Alan, May 19 '20 at 07:26
Then you can just change the active class to open, and keep the same code, I updated the code, try it out — Leo, May 19 '20 at 09:06
Thanks so much for your help with this. Works absolutely perfectly. I'd have been banging my head against a wall trying to get this done. Looking at your code, it appears pretty simple!! — Alan, May 19 '20 at 13:25

Show/Hide div but show a few on page load

2 Answers2