hide/show using jquery

by Evan Raskob

HTML

<div class="hideme">
    <h2>Aphrodite</h2>
    <p class="description">Hello hello</p>
</div>

<div class="hideme">
    <h2>Athena</h2>
    <p class="description">Hello hello</p>
</div>

<div class="hideme">
    <h2>Zeus</h2>
    <p class="description">Hello hello</p>
</div>

<div class="other">no no no no </div>

CSS

div {
    border: 1px dotted black;
    min-height:16px;    
}

.hideme p {
    display:none;
    background-color:gray;
}

JavaScript

$('.hideme').click( function() {
    
    var target = $(this).children(".description");
    
    if ( target.css("display") == "none")
    {
        target.css("display", "block");
    }
    else
    {
        target.css("display", "none");
    }
});