Solution 1 :

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>

Solution 2 :

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>

Solution 3 :

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>

Solution 4 :

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

Problem :

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");
    });
});

Comments

Comment posted by isherwood

What’s the problem? What’s not working? I’d start by fixing

Comment posted by isherwood

Nice, but you really shouldn’t hide every div element in the page, even for a demo.

Comment posted by Robert McKee

That was part of his requirements.

Comment posted by A Mobin

basically my requirement is through JS.

Comment posted by Robert McKee

I added a jquery solution for you, although I implemented the ‘hide divs by default’ through CSS. You can do it via javascript as well, but the page will look bad as it loads since all the divs are shown until the page is entirely loaded. If you really need that in javascript as well, then just throw a

By

Leave a Reply

Your email address will not be published. Required fields are marked *