CODEWITHSUNDEEP
jquery
Abhinav
Abhinav

Reputation: 709

Div items are not getting display on click?

I am working on a single page website and want to display content based on Menu item clicked. Instead of loading new page every time I am trying to achieve it with JQuery. If someone could help me in figuring out where my code is wrong.

$('#campaignsPage, #subscribersPage, #reportsPage').hide();

$(".sideNav li").each(function(i) {
  $(this).click(function() {
    $("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
    <ul class="navbar-nav" id="sideNav">
      <li id="campaignsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
      </li>
      <li id="subscribersNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
      </li>
      <li id="reportsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
      </li>
    </ul>
  </nav>

  <div id="wrapper">
    <div id="campaignsPage">
      <p>This is campaign Page</p>
    </div>
    <div id="subscribersPage">
      <p>This is subscribers page</p>
    </div>
    <div id="reportsPage">
      <p>MUSIC PAGE reports</p>
    </div>
  </div>
</div>

Desired results-: If I click on Campaigns Item(id="campaignsNav") of menu then content of div with id="campaignsPage" should get display.

Upvotes: 1

Views: 53

Answers (3)

Bhoomi
Bhoomi

Reputation: 537

You have to change .sideNav with #sideNav because you use id not class 

$('#campaignsPage, #subscribersPage, #reportsPage').hide();

$("#sideNav li").each(function(i) {
  $(this).click(function() {
    $("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
    <ul class="navbar-nav" id="sideNav">
      <li id="campaignsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
      </li>
      <li id="subscribersNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
      </li>
      <li id="reportsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
      </li>
    </ul>
  </nav>

  <div id="wrapper">
    <div id="campaignsPage">
      <p>This is campaign Page</p>
    </div>
    <div id="subscribersPage">
      <p>This is subscribers page</p>
    </div>
    <div id="reportsPage">
      <p>MUSIC PAGE reports</p>
    </div>
  </div>
</div>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Your ul element has id value as sideNav but you are using a class selector as .sideNav which should be changed to id selector as #sideNav and it will work great:

$(document).ready(function(){
    $('#campaignsPage, #subscribersPage, #reportsPage').hide();
    $("#sideNav li").each(function(i) {
        $(this).click(function() {
            $("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
        });
    }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
      <ul class="navbar-nav" id="sideNav">
        <li  id="campaignsNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
        </li>
        <li id="subscribersNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
        </li>
        <li  id="reportsNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
        </li>    
      </ul>
    </nav>

    <div id="wrapper">
        <div id="campaignsPage"><p>This is campaign Page</p></div>
        <div id="subscribersPage"><p>This is subscribers page</p></div>
        <div id="reportsPage"><p>MUSIC PAGE reports</p></div>
    </div>
</div>

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

You don't need to iterate over li for attaching same event. You can bind a single click element, create the id for target element using clicked li element id and show hide target and sibling elements using it:

 $("#sideNav li").click(function(i) {
   var targetDivID = this.id.replace('Nav','Page');    
   $('#'+targetDivID).show().siblings().hide();
 });

You can also chain the click event with .first().click() to trigger first element click and show it on default.

$(function(){
  $("#sideNav li").click(function(i) {
     var targetDivID = this.id.replace('Nav','Page');    
     $('#'+targetDivID).show().siblings().hide();
   }).first().click(); 
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
      <ul class="navbar-nav" id="sideNav">
        <li  id="campaignsNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
        </li>
        <li id="subscribersNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
        </li>
        <li  id="reportsNav">
          <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
        </li>    
      </ul>
    </nav>

    <div id="wrapper">
        <div id="campaignsPage"><p>This is campaign Page</p></div>
        <div id="subscribersPage"><p>This is subscribers page</p></div>
        <div id="reportsPage"><p>MUSIC PAGE reports</p></div>
    </div>
</div>

Upvotes: 2

Related Questions