Javascript Hide/shown Toggle Didn't Work

Question

I'm trying to Make a Javascript Toggle Such that when i click on any of below divNO buttons only that div shown all other Hide. But It didn't work:

 function toggle(show,hide) { document.getElementById(id).style.display = 'block'; document.getElementById(id).style.display= 'none'; } 

 <a href='#' onclick="toggle('show','hide')">div1</a> <a href='#' onclick="toggle('show','hide')">div2</a> <a href='#' onclick="toggle('show','hide')">div3</a> <a href='#' onclick="toggle('show','hide')">div4</a> <a href='#' onclick="toggle('show','hide')">div5</a> <div class='div1' >first div</div> <div id='id' class='div2' style='display:none'>second div</div> <div id='id' class='div3' style='display:none'>third div</div> <div class='id' style='display:none'>fourth div</div> <div class='id' style='display:none'>fifth div</div> 

Answer 1

I have updated your markup little bit and javascript function as well. See below:

HTML Part:

<a href='#' onclick="toggle('div1')">div1</a>
<a href='#' onclick="toggle('div2')">div2</a>
<a href='#' onclick="toggle('div3')">div3</a>
<a href='#' onclick="toggle('div4')">div4</a>
<a href='#' onclick="toggle('div5')">div5</a>
<div id='div1' class="div">first div</div>
<div id='div2' class="div" style='display:none'>second div</div>
<div id='div3' class="div" style='display:none'>third div</div>
<div id='div4' class="div" style='display:none'>fourth div</div>
<div id='div5' class="div" style='display:none'>fifth div</div>

And JavaScript Part:

function toggle(id) {
    var divsToHide = document.getElementsByClassName("div");
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.display = "none";
    }
    document.getElementById(id).style.display = 'block';
}

Answer 2

Hope this helps you....

 $("a").click(function(){ var myelement = $(this).attr("href") $(myelement).toggle(); $(".toggle:visible").not(myelement).hide(); }); 

 div.toggle{display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#div1"> DIV 1</a> <a href="#div2"> DIV 2</a> <div class ="toggle" id="div1">div1</div> <div class ="toggle" id="div2">div2</div> 

Answer 3

You can use a data attribute to set an index of the link clicked and tehn use jquery to hide / show the links.

UPDATE - it is always better to add / remove classes with rather than directly affecting the css of the element. In that vein - I have amened my solution to add / remove the 'active' class on the divs - and this is whattoggles the disply state.

 $('a').click(function(){ var id = $(this).attr('data-id'); $('.sampleDivs').removeClass('active'); $('#div' + id).addClass('active'); }) 

 .sampleDivs {display:none} .sampleDivs.active {display:block} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href='#' data-id='1'>div1</a> <a href='#' data-id='2'>div2</a> <a href='#' data-id='3'>div3</a> <a href='#' data-id='4'>div4</a> <a href='#' data-id='5'>div5</a> <div id ='div1' class='sampleDivs active'>first div</div> <div id ='div2' class='sampleDivs'>second div</div> <div id ='div3' class='sampleDivs'>third div</div> <div id ='div4' class='sampleDivs'>fourth div</div> <div id ='div5' class='sampleDivs'>fifth div</div> 

Answer 4

First up there may be a CSS only solution for you, using :target . The issue with this is displaying a div by default.

 .sampleDivs {display:none;} .sampleDivs:target{display:block;} 

 <a href='#div1'>div1</a> <a href='#div2'>div2</a> <a href='#div3'>div3</a> <a href='#div4'>div4</a> <a href='#div5'>div5</a> <div id ='div1' class='sampleDivs'>first div</div> <div id ='div2' class='sampleDivs'>second div</div> <div id ='div3' class='sampleDivs'>third div</div> <div id ='div4' class='sampleDivs'>fourth div</div> <div id ='div5' class='sampleDivs'>fifth div</div> 

As the question is tagged with jQuery, here is a semantic jQuery alternative that leverages the href attribut.

 $(".divSelector").click(function(){ $(".sampleDivs").hide(); $($(this).attr("href")).show(); return false; }); 

 .sampleDivs { display: none; } .sampleDivs.default { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <a href='#div1' class="divSelector">div1</a> <a href='#div2' class="divSelector">div2</a> <a href='#div3' class="divSelector">div3</a> <a href='#div4' class="divSelector">div4</a> <a href='#div5' class="divSelector">div5</a> <div id='div1' class='sampleDivs default'>first div</div> <div id='div2' class='sampleDivs'>second div</div> <div id='div3' class='sampleDivs'>third div</div> <div id='div4' class='sampleDivs'>fourth div</div> <div id='div5' class='sampleDivs'>fifth div</div>