Toggle div with same ID through JS

user_6483933 0
Viewed 247

Following is my code. My requirement is to hide all div by default through JS. And when click on the link, it should open relevant div with same id.

<ul class="links">
    <li><a href="#search">Search</a></li>
    <li><a href="#del">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>

$(document).ready(function() {   
    $("ul.links li a").on("click", function(e) { 
        e.PreventDefault; 
        var grabID = $(this).attr( "href" );                                
        $('div' + grabID).toggleClass("hide");
        $("div").not('div' + grabID).addClass("hide");
    });
});
html jquery javascript
4 Answers

Don't really need javascript at all for that if you only want the latest link to be the one that is opened:

div { display: none; }
div:target {display:block}
<ul class="links">
    <li><a href="#search">Search</a></li>
    <li><a href="#del">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>

Here is a jquery solution:

$(document).on('click','.links a',function(e){
  e.preventDefault();
  var href = $(this).attr('href');
  $('div').hide();
  $(href).show();
});
div {display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
    <li><a href="#search">Search</a></li>
    <li><a href="#del">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>

user_8563530

Hide your all divs on load of your document. And just show the respective div on click of the link.

see the working fiddle-

$(document).ready(function() { 
    $("div").hide();
    $("ul.links li a").on("click", function(e) { 
        e.PreventDefault; 
        var grabID = $(this).attr( "href" );   
        $('div').hide();
        $('div' + grabID).show();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
    <li><a href="#search">Search</a></li>
    <li><a href="#del">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>

user_78438280

You can fix this issue by simply adding the class hide to all targets initially like

$('.search, .del').addClass("hide");
$("ul.links li a").on("click", function(e) {
  e.preventDefault();
  var grabID = $(this).attr("href");  
  $('div' + grabID).toggleClass("hide");
  $("div").not('div' + grabID).addClass("hide");
});
.hide{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
  <li><a href="#search">Search</a></li>
  <li><a href="#del">Share</a></li>
</ul>
<div id="search" class="search">
  <input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
  Share me
</div>

user_18238410

Here you go with a solution using pure JavaScript

document.getElementById("search").classList.add("hide");
document.getElementById("del").classList.add("hide");

function clickMethod(e) {
  var id = e.getAttribute("href").replace("#", "");
  document.getElementById(id).classList.toggle("hide");
}
.hide {
  display: none;
}
<ul class="links">
    <li><a href="#search" onclick="clickMethod(this)">Search</a></li>
    <li><a href="#del" onclick="clickMethod(this)">Share</a></li>
</ul>

<div id="search" class="search">
    <input type="search" placeholder="Search" />
</div>

<div id="del" class="del">
    Share me
</div>

Define a class name hide which will help you to hide the element and then use the toggle method to toggle the class.

Hope this will help you

user_70790250
Related