CODEWITHSUNDEEP
togglejquery
FungyBytes
FungyBytes

Reputation: 413

Jquery toggle always open div's / open at start

I'm using the following script to create a toggle effect for opening and closing div's. 

<script type="text/javascript" src="/mainmenu/js/jquery.min.4.1.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() 
{
jQuery(".content").hide();
jQuery(".heading").click(function()
{
jQuery(".content").hide();
jQuery(this).next(".content").slideToggle(500);
});
});
</script>


<div class="main_text_faq"
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum</div>
</div>

Now I can't just seem to figure out how I can let Header 1 to always be open and to have Header 2 open when entering the content. Any ideas how I can start coding this? I am in the process of learning how to use Jquery so please forgive me for not having anything to show for what I allready tried to fix my "problem"

Thanks in advance. Regards!

Upvotes: 0

Views: 1514

Answers (1)

James Allardice
James Allardice

Reputation: 165941

If I've understood your question correctly, you want the first .content element to stay visible when the others are initially hidden. To do that you can use the :not and :first pseudo-selectors to exclude the first element:

jQuery(".content:not(:first)").hide();

Here's a working example.

Upvotes: 1

Related Questions