I've the below html and the div containing class tabHeader
is not expanding/collapsing at all.
<div class="tabHeader">
<li><a href="#" id='onejltab' class="tablinks">1JL(Mobile)</a></li>
<div class="insideTabHeader">
<li><a href="/onejl/1" class="tablinks" style="text-align:center">Network</a></li>
<li><a href="/onejl/2" class="tablinks" style="text-align:center">Application</a></li>
<li><a href="/onejl/3" class="tablinks" style="text-align:center">Integration</a></li>
<li><a href="/onejl/4" class="tablinks" style="text-align:center">Infrastructure</a></li>
</div>
</div>
Have written the below jquery
to collapse/expand the div tabHeader
$("#tabHeader").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.next();
$insideTabHeader.slideToggle(500, function () {
});
});
I'm not sure why the above jquery isn't working. Any help/solution would be of great help.
Thanks in advance.
1- Use the anchor id or class instead of the div
2- use $tabHeader.closest('li').next();
instead of $tabHeader.next();
$("#onejltab").click(function () {
$tabHeader = $(this);
$insideTabHeader = $tabHeader.closest('li').next();
$insideTabHeader.slideToggle(500, function () {
});
});
Demo
$("#onejltab").click(function () { $tabHeader = $(this); $insideTabHeader = $tabHeader.closest('li').next(); $insideTabHeader.slideToggle(500, function () { }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabHeader"> <li><a href="#" id='onejltab' class="tablinks">1JL(Mobile)</a></li> <div class="insideTabHeader"> <li><a href="/onejl/1" class="tablinks" style="text-align:center">Network</a></li> <li><a href="/onejl/2" class="tablinks" style="text-align:center">Application</a></li> <li><a href="/onejl/3" class="tablinks" style="text-align:center">Integration</a></li> <li><a href="/onejl/4" class="tablinks" style="text-align:center">Infrastructure</a></li> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.