javascript - Identifying the id of the clicked tab on Jquery Slider tab -

javascript - Identifying the id of the clicked tab on Jquery Slider tab -

i have 2 outer tabs , each outer tab has 2 inner tabs , these 2 inner tabs have 2 links. outer tabs in class flip , inner tabs in class panel. when flip clicked, panel expanded show contents of tab. on have done, when click of outer tabs, outer tabs slid , inner tabs direct kid of outer tabs slide, revealing links. want accomplish is, when outer tab clicked, has slid, revealing inner tabs , when inner tab clicked, create links belong clicked inner tab should revealed.

html :

<div class="flip" id="outer_flip_1">outer 1 <div class="panel" id="outer_panel_1"> <div class="flip" id="link_flip_1"> panel 1 <div class="panel" id="link_panel_1"> link 1 </div> <div class="panel" id="link_panel_2"> link 2 </div> </div> <div class="flip" id="link_flip_2"> panel 2 <div class="panel" id="link_panel_3"> link 3 </div> <div class="panel" id="link_panel_4"> link 4 </div> </div> </div> <div class="flip" id="outer_flip_2">outer 2 <div class="panel" id="outer_panel_2"> <div class="flip" id="link_flip_3"> panel 3 <div class="panel" id="link_panel_5"> link 5 </div> <div class="panel" id="link_panel_6"> link 6 </div> </div> <div class="flip" id="link_flip_4"> panel 4 <div class="panel" id="link_panel_7"> link 7 </div> <div class="panel" id="link_panel_8"> link 8 </div> </div> </div> </div>

javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(evt){ $(".flip").click(function(evt){ $(".panel").stop().slidetoggle(300); }); }); </script>

css:

.panel,.flip { padding:5px; text-align:center; border:solid 1px #c3c3c3; } .flip { background-color:#e5eecc; } .panel { display:none; background-color:#fff; }

by default tabs display none set display none in css panel , flip both , apply below given code work because it's consist of current object. please seek below js code

$(document).ready(function(evt){ $(".flip").click(function(evt){ $(this).slidetoggle(300); }); $(".panel").click(function(evt){ $(this).slidetoggle(300); }); });

javascript jquery html css tabs