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();         }); });     

js fiddle

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(); });