CODEWITHSUNDEEP
jquerycss
user244394
user244394

Reputation: 13468

Jquery showing and hiding issues with child divs

My code below opens and shows the content individuall. When the content is displayed, I want to hide the href which contains class "item-show" the problem I am having is hiding ".item-show" when the content is shown . The close button when clicked should hide the content and show the href again, but currently it's not closing.

Here is my Code below and fiddle demo here:

$(document).ready(function() {
    $(".item-content").hide();
    $(".item-show").on("click hover", function() {
       $(this).parent('p').next(".item-content").slideDown( "slow" );
       $(this).parent('p').next('.item-show').hide();  
    });
    $("span.close-icon").on("click hover", function() {
       $(this).parent('p').next(".item-content").slideUp( "slow" );
      $(this).parent('p').next('.item-show').show(); 

    });
});

Upvotes: 0

Views: 45

Answers (2)

jnoreiga
jnoreiga

Reputation: 2174

here you go.

https://jsfiddle.net/zsdgjsz7/

//PREVIEW CARD 
    $(".item-content").hide();
    $(".item-show").on("click hover", function() {
       $(this).hide().parent('p').next(".item-content").slideDown( "slow" );
    });
    $("span.close-icon").on("click hover", function() {
       $(this).parent('.item-content').slideUp('slow').parent().find('.item-show').show();

    });

Upvotes: 1

indubitablee
indubitablee

Reputation: 8216

demo: http://jsfiddle.net/n7305445/29/

use .slideToggle() to toggle .item-content

use .closest() and .find() to navigate through the DOM tree

$(document).ready(function() {
    //PREVIEW CARD 
    $(".item-content").hide();
    $(".item-show").on("click", function() {
        $(this).closest('.item-b').find(".item-content").slideToggle( "slow" );
    });
    $("span.close-icon").on("click", function() {
        $(this).closest('.item-content').slideUp( "slow" );
    });
});

Upvotes: 2

Related Questions