javascript - Toggle/document/click and close other? -

here scenario.

step 1- click action opens drop down can closed on click of anywhere except dropdown area , action text.

problem 1- want close on click of action text only. solution close on click of area anywhere except dropdown area , on click of action text.

step 2 - on click of multiple action text opens multiple dropdowns .

problem 2- want way if 1 gets open other gets close.

code:

$('.toggleclass a').click(function(ev) {    $(this).next('.actiondropdown').fadein(500);      });  $(document).click(function(e) {    e.stoppropagation();    var container = $(".toggleclass");      //check if clicked area dropdown or not    if (container.has(e.target).length === 0) {      $('.actiondropdown').fadeout(500);    }    });

* {    margin: 0px;    padding: 0px;    float: left;    box-sizing: border-box;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    font-family: arial;  }    {    text-decoration: none;  }    body,  html {    width: 100%;    height: 100%;    background: #cbeeff  }    .row1 {    width: 100%;    background: #fff;    margin: 5px 0;  }    .row1-2 {    width: 50%;    position: relative;    text-align: center;    padding: 10px 0;    border-right: 2px solid #000  }    .row1-2+.row1-2 {    border-right: 0px;  }    .row1-2 {    color: #ff4886;    float: none;  }    .actiondropdown {    position: absolute;    background: #7bd4ff;    border: 2px solid #000;    top: 20px;    padding: 30px 10px;    display: none;    z-index: 9;    right: 0px;    left: 0px;    max-width: 180px;    margin: 0px auto;  }  .infodiv{ width:100%; padding:10px; background:#ffadc9;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <!-----row 1--------->  <div class="row1">    <div class="row1-2">simple text</div>    <div class="row1-2 toggleclass"> <a href="#">action</a>      <div class="actiondropdown">        drop down !      </div>    </div>  </div>  <!-----row 1--------->  <!-----row 2--------->  <div class="row1">    <div class="row1-2">simple text</div>    <div class="row1-2 toggleclass"> <a href="#">action</a>      <div class="actiondropdown">        drop down !      </div>    </div>  </div>  <!-----row 2--------->  <!-----row 3--------->  <div class="row1">    <div class="row1-2">simple text</div>    <div class="row1-2 toggleclass"> <a href="#">action</a>      <div class="actiondropdown">        drop down !      </div>    </div>  </div>  <!-----row 3--------->    <div class="infodiv">   <b>info:</b> right click on action on each row open drop down multiple times. want when 1 drop down open on click of action , other drop down if open should close.  </div>

see snippet below or jsfiddle

added line jquery :

$(this).parents(".row").siblings(".row").find(".actiondropdown").fadeout(500)

also added common class parent rows ( class row ) in html

you need search other actiondropdown , close same time open one

edit : added new jq code click outside container + explanation

you can add new condition if

&& $(".actiondropdown").has(e.target).length === 0) -> if clicked element not descendant of actiondropdown . if need it

see updated fiddle or snippet below

edit2 : added condition check if dropdown open when click on same action .

var dropdown = $(this).next('.actiondropdown') if ($(dropdown).is(":visible")) {   $(dropdown).fadeout(500) } else {  $(dropdown).fadein(500) } 

see snippet below or updated fiddle

$('.toggleclass a').click(function(ev) {  var dropdown = $(this).next('.actiondropdown')    if ($(dropdown).is(":visible")) {  	  $(dropdown).fadeout(500)  	} else {  	 $(dropdown).fadein(500)  	}    	$(this).parents(".row").siblings(".row").find(".actiondropdown:visible").fadeout(500)      });  $(document).mouseup(function (e)  {        if (!$(".actiondropdown").is(e.target) ) // if target of click not dropdown     {          $(".actiondropdown").fadeout(500);      }  });

* {    margin: 0px;    padding: 0px;    float: left;    box-sizing: border-box;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    font-family: arial;  }    {    text-decoration: none;  }    body,  html {    width: 100%;    height: 100%;    background: #cbeeff  }    .row1 {    width: 100%;    background: #fff;    margin: 5px 0;  }    .row1-2 {    width: 50%;    position: relative;    text-align: center;    padding: 10px 0;    border-right: 2px solid #000  }    .row1-2+.row1-2 {    border-right: 0px;  }    .row1-2 {    color: #ff4886;    float: none;  }    .actiondropdown {    position: absolute;    background: #7bd4ff;    border: 2px solid #000;    top: 20px;    padding: 30px 10px;    display: none;    z-index: 9;    right: 0px;    left: 0px;    max-width: 180px;    margin: 0px auto;  }  .infodiv{ width:100%; padding:10px; background:#ffadc9;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <!-----row 1--------->  <div class="row row1">    <div class="row1-2">simple text</div>    <div class="row1-2 toggleclass"> <a href="#">action</a>      <div class="actiondropdown">        drop down !      </div>    </div>  </div>  <!-----row 1--------->  <!-----row 2--------->  <div class="row row1">    <div class="row1-2">simple text</div>    <div class="row1-2 toggleclass"> <a href="#">action</a>      <div class="actiondropdown">        drop down !      </div>    </div>  </div>  <!-----row 2--------->  <!-----row 3--------->  <div class="row row1">    <div class="row1-2">simple text</div>    <div class="row1-2 toggleclass"> <a href="#">action</a>      <div class="actiondropdown">        drop down !      </div>    </div>  </div>  <!-----row 3--------->    <div class="infodiv">   <b>info:</b> right click on action on each row open drop down multiple times. want when 1 drop down open on click of action , other drop down if open should close.  </div>