带有多个目标的jQuery slideDown

Question

I'm hoping someone can help me make this work correctly.

I have this HTML:

    <div id="courses_container" class="row">
    <div class="section group">
        <div class="col one-third">
            <p class="mod-count">1</p>
            <p class="reveal"><a class="modselect" target="4">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">2</p>
            <p class="reveal"><a class="modselect" target="5">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">3</p>
            <p class="reveal"><a class="modselect" target="6">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">4</p>
            <p class="reveal"><a class="modselect" target="7">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">5</p>
            <p class="reveal"><a class="modselect" target="8">view modules</a></p>
        </div>
        <div class="col one-third">
            <p class="mod-count">6</p>
            <p class="reveal"><a class="modselect" target="9">view modules</a></p>
        </div>
    </div>
</div>

<div id="child-container">
    <div class="row first" id="modules-container-4">
        <div class="section group">
            <div class="col fw"><p>WILL CONTAIN THE MODULES IN COURSE 4</p></div>
        </div>
    </div> 
    <div class="row" id="modules-container-5">
        <div class="section group">
            <div class="col fw"><p>WILL CONTAIN THE MODULES IN COURSE 5</p>
            <p>SOME OF THESE WILL HAVE LONGER CONTENT</p></div>
        </div>
    </div>
    <div class="row" id="modules-container-6">
        <div class="section group">
            <div class="col fw"><p>WILL CONTAIN THE MODULES IN COURSE 6</p>
            <p>SOME OF THESE WILL HAVE LONGER CONTENT</p>
            <p>AND THE CONTENT OF SOME WILL BE LONGER STILL</p></div>
        </div>
    </div>
    <div class="row" id="modules-container-7">
        <div class="section group">
            <div class="col fw"><p>WILL CONTAIN THE MODULES IN COURSE 7</p></div>
        </div>
    </div>
</div>

This CSS:

#child-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: #000;
    display: none;
}

#child-container p {
    color: #fff;
    font-size: 1em;
    line-height: 1.1em;
    text-align: center;
}

#child-container .row:not(.first) {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

#child-container .row.first {
    display: block;
}


.row {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.section {
    clear: both;
    padding: 0;
    margin: 0;
}

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }

.group:before,
.group:after {
    content:"";
    display:table;
}

.group:after {
    clear:both;
}

.fw {
    width: 100%;
}

#courses_container .one-third:nth-child(4n+0) {
    margin-left: 0;
}

.one-third {
    width: 32.26%;
}

And this jQuery:

(function ($) {
    $(document);
}(jQuery));

jQuery(document).ready(function() {

    jQuery('.reveal').on('click', function(){

        jQuery('#child-container').slideDown();

    });

})

Let's have a fiddle! : http://jsfiddle.net/4gMDH/5/

I know my jQuery is probably pretty far off, but I've backtracked to where I last had it closest to working (if that makes sense!)

I'm trying to make each of the rows in .child-container respond to a click on links in the set of six above it.

On each link-click, I'd like the previously selected div to hide before the next is revealed.

Thank you.

Answer 1

I think you want something like this. Change the target to data-target and move it to the element with the reveal class. I would actually put all this into the <a> element instead of <p>

<a class="reveal" data-target="4">

Then in your jQuery:

jQuery('.reveal').on('click', function(e) {
  e.preventDefault();
  var target = jQuery(this).data('target');
  var childid = '#modules-container-'+target;
  jQuery('#child-container > .row').slideUp();
  jQuery(childid).slideDown();
});

What this does is, it grabs the value of data-target from the link which you just clicked, for example, 4. It appends this value to get the id of the row you want to show, #modules-container-4 . Then it hides all of the rows (of course only the currently visible one will slide up), and finally slides down the one you want.

Update: I also had to remove display:none from the #child-container CSS, and position:absolute from the rows. Here's a fiddle:

http://jsfiddle.net/CSL65/1/