Alright. I've below Code. What I want to perform is that, Upon Clicking a Link, Show/Hide (toggle) very NEXT div having classname subsec & Hide all other divs with classname subsec. Also, On Clicking anywhere OUTSIDE the link & Opened div (div.subsec), Hide the latter (div.subsec).

$(".links").on("click", function(){

 $(this).next("div.subsec").toggle("slow");

});

.subsec{
  display: none;
}

.mainDivs{
  float: left;
	padding: 25px;
}

li{
 border: 2px solid blue;
}

<script src=".1.1/jquery.min.js"></script>
<div class="mainDivs">

<a href="javascript:void(0);" class="links">Link 1</a>

<div class="subsec">
<ul>
  <li>11</li>
  <li>12</li>
</ul>
</div>

</div>

<div class="mainDivs">

<a href="javascript:void(0);" class="links">Link 2</a>

<div class="subsec">
<ul>
  <li>21</li>
  <li>22</li>
</ul>
</div>

</div>

Alright. I've below Code. What I want to perform is that, Upon Clicking a Link, Show/Hide (toggle) very NEXT div having classname subsec & Hide all other divs with classname subsec. Also, On Clicking anywhere OUTSIDE the link & Opened div (div.subsec), Hide the latter (div.subsec).

$(".links").on("click", function(){

 $(this).next("div.subsec").toggle("slow");

});

.subsec{
  display: none;
}

.mainDivs{
  float: left;
	padding: 25px;
}

li{
 border: 2px solid blue;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDivs">

<a href="javascript:void(0);" class="links">Link 1</a>

<div class="subsec">
<ul>
  <li>11</li>
  <li>12</li>
</ul>
</div>

</div>

<div class="mainDivs">

<a href="javascript:void(0);" class="links">Link 2</a>

<div class="subsec">
<ul>
  <li>21</li>
  <li>22</li>
</ul>
</div>

</div>

Fiddle

Toggle method works well but need to close previously opened div as well upon clicking any other links or anywhere in the document outside link/opened div (div.subsec).

What is the best way to achieve?? Thanks in advance. Cheers!!

• javascript
• jquery
• html
• css
• toggle

Share Improve this question Follow edited Dec 1, 2016 at 12:36 Keith 24.3k22 gold badges3131 silver badges4848 bronze badges asked Dec 1, 2016 at 12:30 Jenson M JohnJenson M John 5,69955 gold badges3131 silver badges4848 bronze badges 1

• 1 Wherever possible, try to make a working snippet. This is handy as external links might bee stale, and having a working snippet gives you a better chance of somebody helping. – Keith Commented Dec 1, 2016 at 12:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You need to target all other subsec element and hide them. You can do that by targeting all element with class subsec and filter out target subsec using :not selector:

var subsec = $("div.subsec");
$(".links").on("click", function(){
   var target = $(this).next("div.subsec");
   subsec.not(target).hide('slow')
   target.toggle("slow");
});

Working Demo

You can listen to the document onclick to listen to all clicks.

I check if what I click and find out if I want to keep were I've clicked, and hide everything else.

I've put ments in each check, so for example if you want it so that when you also click inside a .subsec you can ment that part out.. etc..

$(".links").on("click", function(){
 $(this).next("div.subsec").toggle("slow");
});

$(document).on('click', function (e) {
  var $e = $(e.target);
  var keep;
  //if the link is clicked, keep the next .subsec
  if ($e.is('a')) keep = $e.next();
  //if we click inside a .subsec, also keep
  if ($e.is('.subsec')) keep = $e;
  //if our parent is a .subsec keep too
  var $c = $e.closest('.subsec');
  if ($c.length) keep = $c;  
  //now we know what we want to keep, lets hide others
  $('.subsec').not(keep).hide('slow')       
});

.subsec{
  display: none;
}

.mainDivs{
  float: left;
	padding: 25px;
}

li{
 border: 2px solid blue;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDivs">

<a href="javascript:void(0);" class="links">Link 1</a>

<div class="subsec">
<ul>
  <li>11</li>
  <li>12</li>
</ul>
</div>

</div>

<div class="mainDivs">

<a href="javascript:void(0);" class="links">Link 2</a>

<div class="subsec">
<ul>
  <li>21</li>
  <li>22</li>
</ul>
</div>

</div>

Hi try with following code.

var _clicked = false;
$(".links").on("click", function(){
 $(".subsec").hide("slow");
 $(this).next("div.subsec").toggle("slow");
$(window).off("click",onWindowClick);
$(window).on("click",onWindowClick);
_clicked = true;

});
function onWindowClick(e)
{
if(!_clicked && !(e.target.parentNode && e.target.parentNode.parentNode && e.target.parentNode.parentNode.className =='subsec' ))
   {
     $(".subsec").hide("slow");
     $(window).off("click",onWindowClick);
   }
   _clicked = false;

}