ansaurus

Question

Answer 1

+2 A:

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

Sarfraz 2010-07-23 07:49:46

@sarfraz look at my link i want to display the div corresponding to th e link with a fadein effect...

Pandiya Chendur 2010-07-23 07:53:21

@Pandiya Chendur: See my updated answer please.

Sarfraz 2010-07-23 08:00:52

@sarfraz your code doesn't seem to get my result http://jsbin.com/umode4/2/edit

Pandiya Chendur 2010-07-23 08:02:26

@Pandiya: See this, you had an error, fixed now: http://jsbin.com/umode4/3

Sarfraz 2010-07-23 08:08:00

@sarfraz even now you didnt get my point... Exactly like SO ask question page `title` textbox click and `textarea` click right hand side div fade effect...

Pandiya Chendur 2010-07-23 08:10:12

Answer 2

+1 A:

$(".ContentDivs:visible")

spinon 2010-07-23 07:50:56

Answer 3

+1 A:

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

mohang 2010-07-23 07:53:54

Answer 4

+2 A:

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

Reigel 2010-07-23 07:57:05

@Reigel In your demo when i click a new link2 the divs overlap... I just want to hide the visible div and fadein the next div..

Pandiya Chendur 2010-07-23 08:04:49

@Reigel Exactly like SO ask question page title textbox click and textarea click right hand side div fade effect...

Pandiya Chendur 2010-07-23 08:10:29

I made a slight revision of your codes... http://jsfiddle.net/ykdSN/ try it...

Reigel 2010-07-23 08:14:36

Answer 5

A:

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

});

Ioannis Karadimas 2010-07-23 08:24:05

ansaurus

tags:

views:

answers:

Find currently visible div in jquery...

jQuery

html

demo

related questions