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