Expand Bootstrap div to full row on click

Question

I've got this jsFiddle: http://jsfiddle.net/jsFiddlePlayer/xxep0gng/7/

It's using Bootstrap to display some text thumbnails with the Readmore.js library to expand/collapse the thumbs. I've added some custom code to the beforeToggle of the readmore() call to try to do this: When we click the "Read More", that thumbnail should expand to fill the full width of the row (switching the class to col-sm-12) and have all other thumbnails hidden. Then when we click "Close", it needs to collapse the current item (switching class to col-sm-3) and show all other thumbnails that were hidden.

Currently, I've got it to expand the item and hide all other thumbnails. But I can't get the other items to show when we click "Close".

Here's the HTML:

<div class="row">
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-0">
            <h3>Sixth Post</h3>
            <h4>5/14/2015 8:48:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-0">Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-1">
            <h3>Fifth Post</h3>
            <h4>5/14/2015 8:48:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-1">Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-2">
            <h3>Fourth Post</h3>
            <h4>5/14/2015 8:47:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-2">Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-3">
            <h3>Third Post</h3>
            <h4>5/14/2015 8:46:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-4">
            <h3>Second Post</h3>
            <h4>5/14/2015 8:46:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-4">Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail rss-post" id="rss-post-5">
            <h3>First Post</h3>
            <h4>3/3/2015 9:47:00 AM</h4>
            <div class="rss-post-content" id="rss-post-content-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. </div>
        </div>
    </div>

</div>

Here's the jQuery:

$(document).ready(function () {
    $('.rss-post-content').readmore({
        speed: 500,
        beforeToggle: function (trigger, element, expanded) {
            var thumbnailIndex = $(element).attr('id').substring($(element).attr('id').lastIndexOf('-') + 1);
            var others = $(".rss-post").not($('#rss-post-' + thumbnailIndex));
            $('#rss-post-' + thumbnailIndex).closest('.col-sm-3').removeClass('col-sm-3').addClass('col-sm-12');
            others.each(function () {
                $(this).addClass('hidden');
            });
            var anchor = $("a[aria-controls='" + $(element).attr('id') + "']");

            $(anchor).on('click', function (e) {
                $('#rss-post-' + thumbnailIndex).closest('.col-sm-12').removeClass('col-sm-12').addClass('col-sm-3');
                others.each(function () {
                    $(this).removeclass('hidden');
                });
            });
        },
        afterToggle: function (trigger, element, expanded) {}
    });
});

Answer 1

While closing items, you can add a specific class for to call them back again.

 others.each(function () {
            $(this).addClass('hidden IwillNeedYouAgain');
        });

when you need to turn back them;

 $(".IwillNeedYouAgain").removeClass("hidden IwillNeedYouAgain");