CODEWITHSUNDEEP
jquery
lnvrt
lnvrt

Reputation: 732

jQuery hide (and show) element within parent

OK, maybe it's late in the day! I've tried most the related questions, I'm sure it's pretty simple but here goes:

Here's the HTML structure:

<article>

<div class="info-wrap">
<p>blah blah</p>
<a href="#" class="info-close">Close div!</a>
</div>

<a href="#" class="info-show">Show div!</a>

</article>

There will be multiple instances of the above structure (Wordpress loop) so it should only show the div within that instance (not all of them). This is my jQuery so far:

$("a.info-show").click(function(){
     $(this).parent('article').find('.info-wrap').animate({ opacity: 'show' }, "slow");
    return false;
});

Not working. What am I missing here? Thanks!

Upvotes: 0

Views: 2333

Answers (6)

user1776226
user1776226

Reputation:

you can use example created like

$("a.info-show").click(function(e){

$(this).parents('article').find('.info-wrap').fadeIn('slow');
    $("a.info-show").hide('slow');
    return false;
});


$("a.info-close").click(function(e){

$(this).parents('article').find('.info-wrap').fadeOut('slow');
 $("a.info-show").show('slow');
    return false;
});

and use fiddle link to test your question.

Upvotes: 1

Jai
Jai

Reputation: 74738

Try with .prev():

$("a.info-show").click(function () {
   $(this).prev('.info-wrap').fadeIn();
   return false;
});

checkout the fiddle

Upvotes: 0

Amyth
Amyth

Reputation: 32949

Your code looks fine to me. Only problem that i can think of is that you are not binding the click function to an event (like document.ready()). Here is a working JSFiddle for you.

JS

$(document).ready(function(){
    $('.info-show').click(function(){
        var info = $(this).parent().find('.info-wrap > p');
        info.animate({ opacity: 1 }, "slow");
    });
    $('.info-close').click(function(){
        var info = $(this).parent().find('p');
        info.animate({ opacity: 0 }, "slow");
    });
});

Also make sure you initially set the opacity to 0 for this to work.

CSS

article .info-wrap > p {
   opacity: 0;
}

Upvotes: 0

Bluemagica
Bluemagica

Reputation: 5158

TRY:

$("a.info-show").click(function(e){
    $(this).closest("article").find("div.info-wrap").fadeIn(500);
});

Also make sure that the classes are actually present when jquery initialises. If you are using ajax for this, it might be a good idea to bind these to a parent node

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Make sure your script is running inside onready, other than that it seems fine.

$(function(){
    $("a.info-show").click(function(){
        $(this).siblings('.info-wrap').animate({ opacity: 'show' }, "slow");
        return false;
    });
})

Demo: Fiddle

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this:

$(document).ready(function(){
    $("a.info-show").click(function(e){
        e.preventDefault();
        $(this).parents('article').find('div.info-wrap').animate({ opacity: 1 }, "slow");
        return false;
    });
});

Or use:

$(document).ready(function(){
    $("a.info-show").click(function(e){
        e.preventDefault();
        $(this).parents('article').find('div.info-wrap').fadeIn('slow');
        return false;
    });
});

Read http://api.jquery.com/fadeIn/ and http://api.jquery.com/animate/

Upvotes: 2

Related Questions