toggle open and stay open multiple div

Question

I have searching last 4 days to find a working solution for toggle menu. So far i found was that close open div when click another div. Also checked many question in Stackoverflow but none of them was worked as i wanted. What i want to do is that click div (parent) and open (child) click parent again and close child. How i can i do that for multiple parents.

my page structure something like:

DIV PARENT
   div child
DIV PARENT
   div child
DIV PARENT
   div child

.... and so on This is my jquery implementation http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

This is my php code

<?php
    for($i = 0; $i < count($job_id); $i++)
    {
        $bg = ($i % 2) ? "odd" : "even";

        echo '
        <div class="block">
            <div style="border:solid 1px;" id="parent" class="parent ' .$bg. '">
                <div style="float:left; width:50%;"><div class="myMsGothic">' .$title[$i]. '</div></div>
                <div style="float:left; width:15%;">' .$name[$i]. '</div>
                <div style="float:left; width:15%;">' .$area[$i]. '</div>
                <div style="float:left; width:20%; text-align:right;" class="myMsMincho">ID　：　' .strtoupper($_id[$i]). '</div>
                <div class="clearLeft"></div>
            </div>
            <div class="child"><div class="innerContents"><p>' .nl2br($description[$i]). '</p></div></div>
        </div>';
    }
?>

Unfortunately i have no js script in my page now because none of them i was tried worked

Thanks for any help

Answer 1

HTML

<div class="parent">
    <div class="child"></div>
</div>

<div class="parent">
    <div class="child"></div>
</div>

jQuery

$('.parent').click(function() {
    $(this).find('.child').toggle();
});

If you don't like toggle(), you can also try the fancier slideToggle() and fadeToggle().

You mentioned you only want to show parents on page load. Just add these:

CSS

.parent {
    display:none;
}

jQuery

$(document).ready(function() { 
    $('.parent').show();
});

http://jsfiddle.net/my5C9/1/

Answer 2

This is the simple solution. Boxes closed by default. Click to open/close multiple toggles.

The HTML Markup

<div class="toggle">See Stuff</div>
<div class="paragraph">
<p>Content</p>
<p>Video</p>
<p>Image</p>
<ul>
  <li>List</li>
</ul>
<a href="#">Links</a>
</div>

The jQuery

<script>
$('.paragraph').hide();
$('.toggle').click(function() {
var panel = $(this).next()
$('.paragraph').not(panel).slideUp();
panel.slideToggle({
    direction: "down"
}, 1000);
});
</script>

Style It

<style>    
.toggle{margin-bottom:25px; margin-top:25px; margin-left:10px; padding:10px; 
font-size:24px; color:#2554C7; cursor: pointer;}
.paragraph{clear:both;margin-top:25px;}
</style>