how can i show the hidden content in jquery?

Question

I want to hide all the content and show some content as the user click.

In anchor tag I used 'scr' before its id example: scrhome_screen .

But in div tag that I want to show has id home_screen .

Please explain why it is not working?

hideAll();
showTab("home_screen");

$(document).ready(function() {
  $("a").click(function() {
    var id = $(this).attr('id');
    if(id.substring(0, 3)=="scr"){
        hideAll();
        showTab(id.substring(3,id.length));
    }
  });
});

function hideAll(){
  $('#home_screen').hide();
  $('#sec_screen').hide();
  $('#third_screen').hide(); //this is working
  // document.getElementById("home_screen").style.display = "none"; 
  // document.getElementById("sec_screen").style.display = "none";
  // document.getElementById("third_screen").style.display = "none";
}

function showTab(divName){
  console.log(divName);
  $('#'+divName).show(); // it think this line is not working
} 

----------edit------------------- my html code

 hideAll(); showTab("home_screen"); $(document).ready(function() { $("a").click(function() { var id = $(this).attr('id'); if(id.substring(0, 3)=="scr"){ hideAll(); showTab(id.substring(3,id.length)); } }); }); function hideAll(){ $('#home_screen').hide(); $('#sec_screen').hide(); $('#third_screen').hide(); //this is working // document.getElementById("home_screen").style.display = "none"; // document.getElementById("sec_screen").style.display = "none"; // document.getElementById("third_screen").style.display = "none"; } function showTab(divName){ console.log(divName); $('#'+divName).show(); // it think this line is not working } 

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <!-- MENU STARTS HERE --> <ul id="menu"> <li><a href="#" id='scrhome_screen'>Home</a></li> <li> <a href="#">New/Open Project</a> <ul class="hidden"> <li><a href="#" id='scrsec_screen'>New Project</a></li> <li><a href="#" id='scrthird_screen'>Open Project</a></li> </ul> </li> <li> <a href="#">Region</a> <!-- <ul class="hidden"> <li><a href="#">submenu 1</a></li> <li><a href="#">submenu 2</a></li> <li><a href="#">submenu 3</a></li> </ul> --> </li> <li><a href="#">Insurance Indices</a></li> <li><a href="#">Insurance Scheme</a></li> <li><a href="#">Help</a></li> </ul> <!-- HOME STARTS HERE --> <div id="home_screen"> <div id="description"> <fieldset> <p class="descriptionHead">Crop-loss Assessment Monitor Toolbox (CAM)</p> <p id="descritionText">CAM toolbox is specifically designed to estimate prevented sowing, sowing failure and yield loss occurring in a geographical area. The tool has been also embedded with financial viability analytics which determines farmers' premium, maximum claim, claim ratio etc. The CAM tool can also be used to test the important indicators to assess the feasibility of an insurance scheme. Moreover, loss assessment from multiple methods also enables a comparison of risk coverage under different technologies and their subsequent effect on the economics of the insurance scheme.</p> </fieldset> </div> <hr id="ver_line" width="1" size="200"> <div id="login_signup"> <fieldset> <p class="descriptionHead">LOGIN</p> <form> <p id="loginBody"> <input type="text" class="loginForm" placeholder="Login Id"><br> <input type="password" class="loginForm" placeholder="Password"><br> <input type="submit" class="loginButton" value="LOGIN"><br><br> </form> Not registered?<br> <a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a> <br> </p> </fieldset> </div> </div> <!-- 2nd FIELDSETS --> <div id="sec_screen"> <p>another content is here</p> </div> <!-- 3rd FIELDSETS --> <div id="third_screen"> <p>third content is here</p> </div> 

Answer 1

In your code this <li><a href="#" id='scrhome_screen')>Home</a></li> paranthesis is unwanted, it may be the reason. And then again <li><a href="#" id='scrthird_screen')>Open Project</a></li>

Here is another mistake

<form>
  <p id="loginBody">
    <input type="text" class="loginForm" placeholder="Login Id"><br>
    <input type="password" class="loginForm" placeholder="Password"><br>
    <input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>

Tags are closed in the wrong order

Your js works, I did not change anything.

By the way in .substr you can just do id.substring(3) instead of id.substring(3,id.length)

 hideAll(); showTab("home_screen"); $(document).ready(function() { $("a").click(function() { var id = $(this).attr('id'); if (id.substring(0, 3) == "scr") { hideAll(); showTab(id.substring(3,id.length)); } }); }); function hideAll() { $('#home_screen').hide(); $('#sec_screen').hide(); $('#third_screen').hide(); } function showTab(divName) { $('#' + divName).show(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="home_screen">home_screen</div> <div id="sec_screen">sec_screen</div> <div id="third_screen">third_screen</div> <a href="#" id="scrhome_screen">home_screen</a> <a href="#" id="scrsec_screen">sec_screen</a> <a href="#" id="scrthird_screen">third_screen</a>