arifpervez arifpervez - 5 months ago 21
jQuery Question

jquery show hide multiple divs one after another

I like to show multiple divs one after another. For example, when page load, it will show - 'A1'. When 'A1' clicked it will show 'A1 B1', when 'B1' Clicked, it will show 'A1 B1 C1' (vertically)-

A1 (when page load, if clicked, it will show B1)
B1 (when B1 clicked, it will show C1 in vertical order)
C1


Could anyone help me to achieve this please.

Answer

This might get you started.

$('.mydivs').click(function(){
  if ( $(this).next().is(':visible') ) $(this).nextAll().hide();
  else $(this).next().fadeIn();
});
.mydivs:not(:first-of-type){display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a1" class="mydivs">Div A1</div>
<div id="b1" class="mydivs">Div B1</div>
<div id="c1" class="mydivs">Div C1</div>
<div id="d1" class="mydivs">Div D1</div>