javascript - Jquery slidetoggle Show Hide One div at a time -
i having issue create jquery toggle opens 1 div
@ time.
i want 1 content shows when click on div
(show
). here, both open @ same time.
$(document).ready(function(){ var $content = $(".content").hide(); $(".toggle").on("click", function(e){ $(this).toggleclass("expanded"); $content.slidetoggle(); }); });
also: how can add option open div hide once open new 1 give option hide 1 open if don't open new div
clicking on "hide"
text)
you several ways. current html markup use jquery's next function.
$(".toggle").on("click", function(e){ $(this).toggleclass("expanded"); $(this).next().slidetoggle(); });
or wrap toggle , content in div , use parent , find functions.
html
<div class="wrapper"> <div class="toggle"></div> <div class="content">lorem ipsum </div> </div>
javascript
$(".toggle").on("click", function(e){ $(this).toggleclass("expanded"); $(this).parent().find('.content').slidetoggle(); });
if want other .content
slideup
when toggle 1 of them, select .content
divs , use jquery's not function exclude div toggled.
$(".toggle").on("click", function(e){ var target = $(this).parent().find('.content'); $(this).toggleclass("expanded"); target.slidetoggle(); $('.content').not( target ).slideup(); });
Comments
Post a Comment