Javascript Hide/shown Toggle Didn't Work

119
January 05, 2018, at 1:36 PM

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

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();         
});
.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>

Answer 2

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 3

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 4

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>

READ ALSO
Output html code into a div using php if browser width is

Output html code into a div using php if browser width is

Hi there i have an offcanvas menu which i want to output to a div using get_template_part WP function

123
None of my jQuery functions are running on a Squarespace site. Can anyone help me debug? [on hold]

None of my jQuery functions are running on a Squarespace site. Can anyone help me debug? [on hold]

I'm having trouble getting a simple click/Onscroll function to fire on my Squarespace siteI pasted the code for it from one of my other Squarespace sites, which is currently working just fine (frustrating)

100
JS/CSS: how to animate a circle to pill shape?

JS/CSS: how to animate a circle to pill shape?

Ok this is what Im trying to achieve (ideally with JS/jquery): https://dribbblecom/shots/3445331-Expanding-Button

149
Trying to make a comparison site with javascript [on hold]

Trying to make a comparison site with javascript [on hold]

I had no idea what to title this post because I'm not sure where to even start with creating what I wantI am trying to create something like this

113