Find Currently Visible Div In Jquery

I have a four divs all set display:none and on document.ready i am showing the first div.. I have 4 link buttons link1,link2...link4... I showing div1 on link1 click and so on.. Ho

Solution 1:

with lesserr codes, you could do it this way...

jQuery

<script type="text/javascript">
    $(document).ready(function() {
          $("#div1").show().fadeIn("slow");
    });
    $('.links a').click(function() {
        $(".ContentDivs:visible").fadeOut("fast");//find current div here?
        $("#div" + ($(this).index()+1)).show().fadeIn("slow");
    });
</script>

html

<div>
    <div class="links">
        <a id="Link1" href="#">Link1</a> 
        <a id="Link2" href="#">Link2</a>
        <a id="Link3" href="#">Link3</a> 
        <a id="Link4" href="#">Link4</a>
    </div>
    <div id="div1" class="ContentDivs">
        DIv1
    </div>
    <div id="div2" class="ContentDivs">
        Div2
    </div>
    <div id="div3" class="ContentDivs">
        Div3
    </div>
    <div id="div4" class="ContentDivs">
        Div4
    </div>
</div>

demo

Solution 2:

You can use the :visible filter selector for that.

$('.ContentDivs:visible').........

Update:

An easier approach will be to give each of your links a rel attribute with the same value as the id of divs and a class, eg:

<a  class="link" href="#"></a> 
<a  class="link" href="#"></a> 

And divs:

<div id="">
  Div1
</div>

<div id="">
  Div2
</div>

And then all you need is to get the rel of clicked link and show/hide the corresponding div:

$('a.link').click(function(){
  var rel = $(this).attr('rel');

  if ($('div#' + rel).is(':visible'))
  {
    $('div#' + rel).fadeOut('fast');
  }
  else
  {
    $('div#' + rel).fadeIn('fast');
  }

  return false;
});

Solution 3:

Use

$(".ContentDivs:visible");

Solution 4:

try

var displayedDiv = $('div.ContentDivs').filter(':visible');

or even this

   var displayedDiv = $('div.ContentDivs').filter(function(){
       if($(this).css('display') != 'none')
          return true;
       else
          return false;
       });

Solution 5:

This should work:

HTML

<div>
    <div id="links">
        <a id="Link1" href="#" rel="div1">Link1</a> 
        <a id="Link2" href="#" rel="div2">Link2</a>
         <a id="Link3" href="#" rel="div3">Link3</a> 
         <a id="Link4" href="#" rel="div4">Link4</a>
    </div>

    <div id="div1" class="ContentDivs">
    DIv1
    </div>
    <div id="div2" class="ContentDivs">
    Div2
    </div>
    <div id="div3" class="ContentDivs">
    Div3
    </div>
    <div id="div4" class="ContentDivs">
    Div4
    </div>
</div>

Javascript

$(function () {
    $("#links a").click( function () {
        $(".ContentDivs").css( "display", "none");
        $("#"+this.rel+".ContentDivs").fadeIn();
    });

});