Find currently visible div in jquery

jquery html effects

14,625

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 rel="Link1" class="link" href="#">Link1</a> 
<a rel="Link2" class="link" href="#">Link1</a>

And divs:

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

<div id="Link2">
  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;
       });

View more solutions

14,625

Author by

ACP

Updated on June 10, 2022

Comments

ACP about 2 years

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.. How to find which div is currently visible in jquery?

 <style type="text/css">
        .ContentDivs
        {
            width: 90%;
            height: 300px;
            border: solid 5px #404040;
            display:none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <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>
    <script type="text/javascript">
        $(document).ready(function() {
              $("#div1").show().fadeIn("slow");
        });
        $('#Link1').click(function() {
        $(".ContentDivs").fadeOut("fast");//find current div here?
            $("#div1").show().fadeIn("slow");
        });
        $('#Link2').click(function() {
        $(".ContentDivs").fadeOut("fast");//find current div here?
            $("#div2").show().fadeIn("slow");
        });
        $('#Link3').click(function() {
        $(".ContentDivs").fadeOut("fast");//find current div here?
            $("#div3").show().fadeIn("slow");
        });
        $('#Link4').click(function() {
        $(".ContentDivs").fadeOut("fast");//find current div here?
            $("#div4").show().fadeIn("slow");
        });
    </script>

See the effect here http://jsbin.com/umode4/edit