jQuery - toggleClass of DIV when link is clicked, hide link, and show hidden info within DIV. Multiple instances on page

Question

My overall goal starts with having a product page displaying multiple product pictures within the productLayout DIV. Then, the link within that DIV will add a class pL100 which expands the width of the DIV to show hidden content that is hidden within the hidden DIV. I would then want the initial product picture to disappear and the hidden DIV be visible. Within that hidden DIV I want a link to hide that DIV again and bring back the original DIV with the photo. However, I want all of this to toggle based on if someone clicks on another product to expand that product. If they do that, I would want the open DIV to remove the pL100 class to be shown as it was initially.

As of right now, I have all of the toggling down to close the other DIVs when different DIVs are clicked on; however, I need help with hiding the initial content as well as adding a link within the hidden content to remove the added class to go back to normal. As well as having all of that toggle if other DIVs are clicked on.

I would also like to animate the "expanding" and "closing" of the DIVs so it's not so abrupt. Not sure if I can do that because I'm using addClass and removeClass, but if there is a way with doing it all differently, then I'd love to know how.

If you notice, I am calling every 4th productLayout DIV to remove the marrgin on the right with .productLayout:nth-of-type(4n+0) so it sits nicely in the container DIV. However, when a productLayout DIV is clicked, all of the DIVs shift down (which is what I want) but then each 4th productLayout DIV is now pushed against the next DIV. Is there any way to add back in the margin but then apply it to the new 4th productLayout DIV in that row?

I hope this all makes sense, and sorry if I'm not clear. I really appreciate any help, and if I'm doing something wrong please advise. Thank you so much.

Here is the fiddle - http://jsfiddle.net/pT3DC/

Javascript

$(document).ready(function () {
$('.productLayout a').on('click', function(){
$(this).closest('div').toggleClass('pL100').siblings().removeClass('pL100');
$(this).closest('div').children('.hidden').toggleClass('hide').siblings().removeClass('hide');
});
});

HTML

<div class="container">
<div class="productLayout">
    <p><a href="#" class="showMore">Show More 1</a></p>
    <div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
    <p><a href="#" class="showMore">Show More 2</a></p>
    <div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
    <p><a href="#" class="showMore">Show More 3</a></p>
    <div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
    <p><a href="#" class="showMore">Show More 4</a></p>
    <div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
    <p><a href="#" class="showMore">Show More 5</a></p>
    <div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
    <p><a href="#" class="showMore">Show More 6</a></p>
    <div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
    <p><a href="#" class="showMore">Show More 7</a></p>
    <div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
    <p><a href="#" class="showMore">Show More 8</a></p>
    <div class="hidden hide">this is hidden content</div>
</div>
</div>

CSS

.container {
width: 1000px;
padding: 0px 16px; 
}
.productLayout {
width: 228px;
float: left;
margin: 0px 16px 16px 0px;
text-align: center;
border: 1px solid #333333;
}   
.productLayout:nth-of-type(4n+0) {
margin-right: 0px;
}
.pL100 {
width: 936px;
padding: 16px;
color: #000000;
float: left;
margin: 0px 16px 16px 0px;
text-align: center;
border: 1px solid #333333;
}
.hide {
display:none;
}
.hidden {
clear: both;
width: 100%;
background-color: #000000;
color: #FFFFFF;        
}

Here is the fiddle - http://jsfiddle.net/pT3DC/

Answer 1

Answer

Demo: jsFiddle

---

JS

$(document).ready(function () {
    $('.productLayout:nth-of-type(4n+0)').addClass('marginFix');

    $("div .productLayout .show").click(function () {
        $('div .marginFix').removeClass('marginFix');

        $('div .pL100').removeClass('pL100');
        $('.show').removeClass('hide');
        $('div .hidden').addClass('hide');

        $(this).addClass('hide');
        $(this).siblings().removeClass('hide');
        $(this).parent().addClass('pL100');

        // `this` is the DOM element that was clicked
        var index = $("div .show").index(this) + 1;
        $('.productLayout:nth-of-type(4n+' + index + ')').addClass('marginFix');
    });

    $("div .productLayout .hidden").click(function () {
        $('div .marginFix').removeClass('marginFix');
        $('.productLayout:nth-of-type(4n+0)').addClass('marginFix');

        $('div .pL100').removeClass('pL100');
        $('.show').removeClass('hide');
        $('div .hidden').addClass('hide');

        $(this).siblings().removeClass('pL100');
    });
});

---

CSS

.container {
    width: 1000px;
    padding: 0px 16px;
}
.productLayout {
    width: 228px;
    float: left;
    margin: 0px 16px 16px 0px;
    text-align: center;
    border: 1px solid #333333;
}
.marginFix {
    margin-right: 0px;
}
.pL100 {
    width: 936px;
    padding: 16px;
    color: #000000;
    float: left;
    margin: 0px 16px 16px 0px;
    text-align: center;
    border: 1px solid #333333;
}
.hide {
    display:none;
}
.hidden {
    clear: both;
    width: 100%;
    background-color: #000000;
    color: #FFFFFF;
}

---

HTML

<div class="container">
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 1</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 2</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 3</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 4</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 5</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 6</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 7</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
    <div class="productLayout">
        <p class="show">
            <a href="#" class="showMore">Show More 8</a>
        </p>
        <div class="hidden hide">this is hidden content</div>
    </div>
</div>