CODEWITHSUNDEEP
jquery
user2855168
user2855168

Reputation:

jQuery - Toggle children

I have looked all over stackoverflow for the answer to this, and I'm sure its just something stupid that I'm doing.

I have a bunch of divs that only show the heading until the div is clicked, and then the child span should smoothly slide down. When the div is clicked again, the span should hide.

The toggle is working, however the slide down component is not smooth (just instantly appears on the page).

Here is the html for one of the blocks..

<div class="masterscourse">
    <h3>IPM 7790: Special Topics</h3>
    <span class="coursedescription">
    This course provides students an opportunity to explore topics not specifically addressed in a regular course offering, and that are of interest to practitioners and students
    </span>
</div>

The jQuery..

<script>
    $(document).ready(function() {
    $('.masterscourse span').hide();
    $(".masterscourse").click(function(){
        $('span', this).slideToggle('normal');
    });
    });
</script>

I feel like this should be relatively straightforward, so I'm sure its something dumb that I am doing. Any help will be appreciated.

Upvotes: 2

Views: 59

Answers (1)

Jason P
Jason P

Reputation: 27022

The problem is that inline elements don't play nice with height animations. An easy fix would be to give the span a style of display:block:

http://jsfiddle.net/AmKVd/

span.coursedescription {
    display:block;
}

You could also use a div instead of a span.

Upvotes: 3

Related Questions