showing and hiding multiple divs using JavaScript dynamically

Question

Here I have four tds which are clickable and I have four more tds which have ids and concerned data within them. I want to display data when concerned clickable tds are clicked. This I want to do using JavaScript.

Here is my JavaScript code:

var _hidediv = null;
function showdiv(id) {
    var div = document.getElementById(id);
    div.style.display = 'block';
    if(_hidediv)
        _hidediv();
    _hidediv = function () {
         div.style.display = 'none';
    };

If I remove window.addEvent method then it works fine for me. Infact I create a test project and it works fine if I don't include this method wrapper — Rohit Patel
– Rohit Patel, Commented Dec 26, 2012 at 7:15

liunian · Accepted Answer · 2012-12-26 07:16:24Z

1

Is this that you need?

http://jsfiddle.net/f8VL8/11/

var showed = 'news1';

function showdiv(id) {
    if(showed && showed !== id) {
        document.getElementById(showed).style.display = 'none';
    } 
    document.getElementById(id).style.display = 'block';
    showed = id;
}

answered Dec 26, 2012 at 7:16

liunian

4402 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

liunian Over a year ago

remember last showed; when click, hide previous and show what you need. And in jsfiddle, make your js functions out of onload or ready wrap if you want to call it outside

aifarfa · Accepted Answer · 2012-12-26 07:24:26Z

0

rewrite in jquery version

http://jsfiddle.net/f8VL8/13/

js

$('.content').click(function(){
    var target = $(this).attr('href');
    //console.log(target);
    if(target){
        $('.result td').hide();
        $(target).show();
    }
});

HTML

<tr >
      <td><a href="#news1" class="content" >iCMS</a></td>
 </tr>
 <tr>
       <td><a href="#news2" class="content" >SMSC</a></td>
 </tr>
 <tr>
       <td><a href="#news3" class="content">SMS Gateway</a></td>
 </tr>
 <tr>
      <td><a href="#news4" class="content">WAP Gateway</a></td>
 </tr>

answered Dec 26, 2012 at 7:24

aifarfa

3,9392 gold badges25 silver badges35 bronze badges

Comments

Ramesh Moorthy · Accepted Answer · 2012-12-26 07:30:43Z

0

On left side in JSfiddle, change onLoad to no wrap (head) and your script will work.

http://jsfiddle.net/f8VL8/14/

answered Dec 26, 2012 at 7:30

Ramesh Moorthy

6892 gold badges9 silver badges25 bronze badges

Collectives™ on Stack Overflow

showing and hiding multiple divs using JavaScript dynamically

3 Answers 3

1 Comment

js

HTML

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

js

HTML

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related