Hide and show multiple html elements using javascript

I have some tables here, and using this javascript below, I made them hide and show every time a user click on their buttons. What I want to add in to this script, is when someone click on a table's button to show-up, all the other to be hidden. Any idea how can I do this? Thank you in advance!

This is my html code:

<table id="SC1_TH_" class="header_op"><tr><td>
<div id="SC1_BSH_" onClick="SC[1]();" class="hide_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC1_BO_" style="display:dlock;">BLAH BLAH</div>

<table id="SC2_TH_" class="header_cl"><tr><td>
<div id="SC2_BSH_" onClick="SC[2]();" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC2_BO_" style="display:none;">BLAH BLAH</div>

<table id="SC3_TH_" class="header_cl"><tr><td>
<div id="SC3_BSH_" onClick="SC[3]();" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC3_BO_" style="display:none;">BLAH BLAH</div>

This is my javascript:

<script type="text/javascript">

var SC = [];

for (var i = 1; i < 10; i++) {

SC[i] = (function(i){

return function(){

var SC_TH  = document.getElementById('SC'+i+'_TH_');
var SC_BSH = document.getElementById('SC'+i+'_BSH_');    
var SC_BO  = document.getElementById('SC'+i+'_BO_');

  if (SC_BO.style.display == 'block' || SC_BO.style.display == ''){
      SC_TH.className      = 'header_cl';
      SC_BSH.className     = 'show_button';
      SC_BO.style.display  = 'none';}
else {SC_TH.className      = 'header_op';
      SC_BSH.className     = 'hide_button';
      SC_BO.style.display  = 'block';}
     }})(i);}       
</script>

EDIT: In other words, I need something to say, if this button that clicking right now is something all the other to be hidden!!!

This is my html code:

<table id="SC1_TH_" class="header_op"><tr><td>
<div id="SC1_BSH_" onClick="SC[1]();" class="hide_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC1_BO_" style="display:dlock;">BLAH BLAH</div>

<table id="SC2_TH_" class="header_cl"><tr><td>
<div id="SC2_BSH_" onClick="SC[2]();" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC2_BO_" style="display:none;">BLAH BLAH</div>

<table id="SC3_TH_" class="header_cl"><tr><td>
<div id="SC3_BSH_" onClick="SC[3]();" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC3_BO_" style="display:none;">BLAH BLAH</div>

This is my javascript:

<script type="text/javascript">

var SC = [];

for (var i = 1; i < 10; i++) {

SC[i] = (function(i){

return function(){

var SC_TH  = document.getElementById('SC'+i+'_TH_');
var SC_BSH = document.getElementById('SC'+i+'_BSH_');    
var SC_BO  = document.getElementById('SC'+i+'_BO_');

  if (SC_BO.style.display == 'block' || SC_BO.style.display == ''){
      SC_TH.className      = 'header_cl';
      SC_BSH.className     = 'show_button';
      SC_BO.style.display  = 'none';}
else {SC_TH.className      = 'header_op';
      SC_BSH.className     = 'hide_button';
      SC_BO.style.display  = 'block';}
     }})(i);}       
</script>

EDIT: In other words, I need something to say, if this button that clicking right now is something all the other to be hidden!!!

Share Improve this question edited Jan 20, 2013 at 17:35 Paul Fleming 24.5k8 gold badges78 silver badges113 bronze badges asked Jan 20, 2013 at 10:43 DNA180 2662 gold badges7 silver badges28 bronze badges

2 Is there a particular reason you're not using for example jQuery, etc? "Accordion" style showing and hiding is a solved problem with most js libraries: See here – Stephen Byrne Commented Jan 20, 2013 at 10:50
Yes my friend cause I should make my own!!! Orders you see... – DNA180 Commented Jan 20, 2013 at 10:54
1 Somebody ordered you to use inline Javascript instead of a framework like JQuery? – Soviut Commented Jan 20, 2013 at 10:57
Oh yes!!! :) If you have to do with people that can't understand... You know!!! – DNA180 Commented Jan 20, 2013 at 10:59
Yikes, that's too bad. Do they realise that jquery is javascript? And that they are asking you to literally re-invent the wheel? – Stephen Byrne Commented Jan 20, 2013 at 11:48

| Show 5 more ments

3 Answers 3

Sorted by: Reset to default 1

Here's a working example with some very simple jQuery (remended) code.

HTML:

<table><tr><td>
<div class="toggle-button">*</div>OPTION ONE
</td></tr></table>
<div class="toggle">BLAH BLAH</div>

<table><tr><td>
<div class="toggle-button">*</div>OPTION ONE
</td></tr></table>
<div class="toggle">BLAH BLAH</div>

<table><tr><td>
<div class="toggle-button">*</div>OPTION ONE
</td></tr></table>
<div class="toggle">BLAH BLAH</div>

JS:

$(function() {
    $('div.toggle').hide();
    $('.toggle-button').click(function(){
        $('div.toggle').hide();
        $(this).closest('table').next('div.toggle').show();
    });
});

As @StephenByrne mentioned, I also strongly remend using an existing ponent such as jQuery Accordian. It takes minutes to implement and es with a whole host of themes to chose from and is fully customisable. You could spend hours or days writing your own. Unless it's a learning exercise, it's simply a waste of time. No need to reinvent the wheel.

As you have indicated a strong push towards js-only, here's a working js-only solution.

HTML:

<table id="SC1_TH_" class="header_op"><tr><td>
<div id="SC1_BSH_" onclick="toggle(this);" class="hide_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC1_BO_" style="display:block;">BLAH BLAH</div>

<table id="SC2_TH_" class="header_cl"><tr><td>
<div id="SC2_BSH_" onclick="toggle(this);" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC2_BO_" style="display:none;">BLAH BLAH</div>

<table id="SC3_TH_" class="header_cl"><tr><td>
<div id="SC3_BSH_" onclick="toggle(this);" class="show_button">*</div>OPTION ONE
</td></tr></table>
<div id="SC3_BO_" style="display:none;">BLAH BLAH</div>

JS:

function toggle(src) {
    var id =  src.id;
    var index = id.substring(2, 3);

    var i = 1;
    var toggleItem = document.getElementById('SC' + i.toString() + '_BO_');

    while (toggleItem != null) {
        var bShow = index == i;
        var button = document.getElementById('SC' + i.toString() + '_BSH_');
        var table = document.getElementById('SC' + i.toString() + '_TH_');

        if (bShow) {
            toggleItem.style.display = 'block';
            toggleItem.className = 'setitemclassname';
            button.className = 'setbuttonclassname';
            table.className = 'settableclassname';
        }
        else {
            toggleItem.style.display = 'none';
            toggleItem.className = 'setitemclassname';
            button.className = 'setbuttonclassname';
            table.className = 'settableclassname';
        }
        toggleItem = document.getElementById('SC' + (++i).toString() + '_BO_');
    }
}

Inside the while loop when index == i evaluates to true, you know you have the item to show. Add extra logic there to change your class names.

A cleaner solution involves altering your HTML a bit as well - getting rid of the onclick and replacing it with a class (toggleItem) that will allow the javascript to identify the items to be toggled. I also make sure that all the buttons have the class button so they can be identified.

<table id="SC1_TH_" class="header">
  <tr>
    <td>
      <div id="SC1_BSH_" class="button">*</div>OPTION ONE</td>
  </tr>
</table>
<div id="SC1_BO_" class="toggleItem">BLAH BLAH</div>
<table id="SC2_TH_" class="header">
  <tr>
    <td>
      <div id="SC2_BSH_" class="button">*</div>OPTION ONE</td>
  </tr>
</table>
<div id="SC2_BO_" class="toggleItem">BLAH BLAH</div>
<table id="SC3_TH_" class="header">
  <tr>
    <td>
      <div id="SC3_BSH_" class="button">*</div>OPTION ONE</td>
  </tr>
</table>
<div id="SC3_BO_" class="toggleItem">BLAH BLAH</div>

Then in the javascript:

var buttons = document.getElementsByClassName('button'),
  toggleItems = document.getElementsByClassName('toggleItem'),
  tables = document.getElementsByClassName('header');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = getFunction(toggle, i);
}
// getFunction is needed for reasons to do with variable scope
function getFunction(f, p) {return function() {f(p)}}
function toggle(selected) {
    for (var i = 0; i < toggleItems.length; i++) {
        toggleItems[i].style.display = i == selected ? '' : 'none';
        tables[i].className = i == selected ? 'header open' : 'header closed';
        buttons[i].className = i == selected ? 'button show' : 'button hide';
    }
}
toggle(0);  // initially show only the first one

(This does assume that the buttons and toggle items will be in the same order. If that is not the case you will have to revert to checking their IDs or find some other way to associate the items and buttons.)

(EDITED to include changing class of tables and buttons)

Just hide all of them, then show the one that should bee toggled open. This script is not the elegantest solution, but integrates directly in your coding style:

for (var i = 1; i < 10; i++) {
    SC[i] = (function(i){
        var SC_TH  = document.getElementById('SC'+i+'_TH_'),
            SC_BSH = document.getElementById('SC'+i+'_BSH_'),
            SC_BO  = document.getElementById('SC'+i+'_BO_');

        return function(action) {
            if (!action) action = SC_BO.style.display=="none" ? "show" : "hide";

            if (action == "show") { 
                for (var i=0; i<SC.length; i++)
                    SC[i]("hide");
                SC_TH.className      = 'header_op';
                SC_BSH.className     = 'hide_button';
                SC_BO.style.display  = '';
            } else {
                SC_TH.className      = 'header_cl';
                SC_BSH.className     = 'show_button';
                SC_BO.style.display  = 'none';
            }
        };
    })(i);
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Hide and show multiple html elements using javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)