Showing and hiding dynamically generated ID's with javascript

Question

The code below is showing and hiding div content with dynamically generated id's like div_1, div_2 from div id , all seems working fine except that it requires to hide one div content at a time like clicking div_1 should open its content and on clicking div_2 should hide div_1. please help me sort out this problem.

echo "<span class='bold'><a name='form_a_$group_seq' href='#div_$group_seq' id='form_a_$group_seq' value='1' " .
"onclick='return divclick(this,\"div_$group_seq\");'";
 if ($display_style == 'block') echo "clicked";
 echo "<b>" . xl_layout_label($group_name) . "</b></a></span>\n";

 echo "<div id='div_$group_seq' class='section' style='display:$display_style;'>\n";
 echo " <table border='0' cellpadding='0'>\n";
 $display_style = 'none';
}
else if (strlen($last_group) == 0) {
echo " <table border='0' cellpadding='0'>\n";
}

Below is the javascript to make the code workable. but its showing or hiding all the div contents at a time.

function divclick(a, divid) {
    var divstyle = document.getElementById(divid).style;
    if ( divstyle.display == 'none' ) {
        divstyle.display = 'block';
    } else {
        divstyle.display = 'none';
    }
    return true;
}

this is a piece of updated html code that's what browser is rendering.

<div class='container2'><ul class='taby'><li class='dropown'><a name='form_a_1' href='#div_1'   id='form_a_1' value='1' onclick='return divclick(this,"div_1");'>Who</a></li></ul>
<div id='div_1' class='section'>
<table border='0' cellpadding='0'>
<div id='div_2' class='section'>
<table border='0' cellpadding='0'>
<div id='div_3' class='section'>
<table border='0' cellpadding='0'>

Answer 1

This is really too messy to work with and understand. You should consider cleaning up the way you dynamically render html, and it would make problems like this a lot easier to solve when you ran into them. Or prevent them all together.

<span class='bold' style='background:#0DCAD1'>


<a name="<?php echo "form_a_$group_seq";?>" href="<?php echo "#div_$group_seq";?>" id="<?php echo "form_a_$group_seq";?>" value='1'>

etc....

If you render all of your html in echo strings, you'll find it very hard to deal with later on. Especially, when you're working on applications which large amounts of rendering.

Answer 2

If you are using jquery in the page you can add one line in your code

function divclick(a, divid) {
    var divstyle = document.getElementById(divid).style;
    if ( divstyle.display == 'none' ) {
        $(".section").css('display', 'none');
        divstyle.display = 'block';
    } else {
        divstyle.display = 'none';
    }
    return true;
}

If you are not using jquery on the page it gets a little more complicated but can be done with only adding a few lines.

function divclick(a, divid) {
    var divstyle = document.getElementById(divid).style;
    if ( divstyle.display == 'none' ) {
        var sections = document.getElementsByClassName('section');
        Array.prototype.forEach.call(sections, function(section){
            section.style.display = 'none';
        });
        divstyle.display = 'block';
    } else {
        divstyle.display = 'none';
    }
    return true;
}