.show() .hide() is not working

Question

Hi I am using Masonry with Laravel and I am basically loading my blogs into a masonry layout. I have an abstract which I output as well as all the content, the content is hidden by default by CSS. I have a read more button once clicked, adds a class to that div which expands the masonry block and hides the abstract and shows the full content.

However when I click read more on another div the div.fullstory is shown, I want to hide this but I'm not sure how to I've tried to use the jQuery previous method but this doesn't seem to be working out for me.

A simple version of my code is below or please view my JSFIDDLE

Any help much appreciated.

HTML:

<div id="masonary-blogs">
    <div class="one-third column">
        <h3>title</h3>
        <div class="abstract">
            <p>abstract</p>
        </div>
        <div class="fullstory">
            <p>fullstory</p>
        </div>
        <div class="button">
            <a href="#" id="read-more">Read more</a>
        </div>
    </div>
       <div class="one-third column">
        <h3>title</h3>
        <div class="abstract">
            <p>abstract</p>
        </div>
        <div class="fullstory">
            <p>fullstory</p>
        </div>
        <div class="button">
            <a href="#" id="read-more">Read more</a>
        </div>
    </div>
        <div class="one-third column">
        <h3>title</h3>
        <div class="abstract">
            <p>abstract</p>
        </div>
        <div class="fullstory">
            <p>fullstory</p>
        </div>
        <div class="button">
            <a href="#" id="read-more">Read more</a>
        </div>
    </div>

</div>

CSS:

.one-third {
    width:23%;
    background:#dedede;
    min-height:100px;

}
.column {
    display:inline-block;
    margin-left:5px;
    margin-right:5px;
}
.fullstory {
    display:none;
}
.gigante {
    width:100%;
}
.hide {
    display:none;
}

.show {
    display:block;
}

JQUERY:

$('#masonary-blogs').on('click', 'a', function(e){
    var blogItem = $(this).parents('.one-third'),
        container = $('#masonary-blogs');

    e.preventDefault();
    console.log('Blog link click');

    $('.gigante').removeClass('gigante');
    $(e.target).parents('.one-third').addClass('gigante');
    $(e.target).prev('div.abstract').show();
    $(e.target).prev('div.content').hide();

});

You declare two variables at the top, and then they are never used..? — Bill, Dec 24 '14 at 23:56

Brian McCall · Accepted Answer · 2014-12-25T00:52:25.603

http://jsfiddle.net/9jf48c7g/7/

$('#masonary-blogs').on('click', 'a', function(e){
e.preventDefault();
var article = $(this).parent().parent();
    article.siblings('.article').children('.abstract').show();
    article.siblings('.article').children('.fullstory').hide();    
    article.children('.abstract, .fullstory').toggle()
});

alright heres a short explanation for the next person to reference this.

once the link in the button is clicked we use jquerys $(this) to make a reference to what the user just clicked, since that is inside a div we have to get 'up' to that div by using parent(). that div (.button) is inside another div that contains the 3 pieces(divs) to the article. since we want to get 'up' to that divs level we use parent() again. now are at the uppermost level and we can reference the other articles uppermost level through the siblings() method. siblings looks for other elements at the same level i.e contained by the same element. so we look at the siblings with a class of .article then grab the children elements and show/hide them. after the siblings abstract has been set to show and the full story has been set to hide we then toggle() the children contained by the same div as the button that was clicked

You have not explained your answer at all. Has the OP learnt anything? No. He has just copy and pasted this code. Good work. -1. — Bill, Dec 25 '14 at 00:41

.show() .hide() is not working

1 Answers1