CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Laurence
Laurence

Reputation: 9

How to show one div at a time with least lines of code?

I am trying to show only one div at a time once a link is clicked. My codepen I was working on is here if someone could take a look. I'm trying to use jQuery so that when an element inside a list item is clicked it toggles that div item to display ONLY until another item is clicked which hides the previous item.

$( "#home_div" ).hide();
$( "#about_div" ).hide();

$( "#home" ).click(function() {
 $('#home_div').toggle();
});
$( "#about" ).click(function() {
 $('#about_div').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css">
</head>	
<body>
<header class="header">
      <ul class="main-nav">
          <li id="home"><a href="#">Home</a></li>
          <li><a id="about" href="#">About</a></li>
          <li><a id ="portfolio" href="#">Portfolio</a></li>
          <li><a id="contact" href="#">Contact</a></li>
      </ul>
           <div id="home_div"></div>
           <div id="about_div"></div>
           <div id="portfolio_div"></div>
           <div id="contact_div"></div>


  
  </header> 
  </body>

Upvotes: 0

Views: 48

Answers (3)

Taplar
Taplar

Reputation: 24965

How about zero javascript? You could change the menu to be labels that tie to radio buttons that control which div shows. The CSS only shows the div immediately after the radio button that is currently selected, modifiable by clicking any of the menu labels.

[name=mainNavState] { display: none; }
[name=mainNavState] + div { display: none; }
[name=mainNavState]:checked + div { display: inherit; }
<ul class="main-nav">
  <li id="home"><label for="homeState">Home</label></li>
  <li><label for="aboutState">About</label></li>
  <li><label for="portfolioState">Portfolio</label></li>
  <li><label for="contactState">Contact</label></li>
</ul>

<input type="radio" name="mainNavState" id="homeState" checked>
<div id="home_div"> My Home Stuff </div>
<input type="radio" name="mainNavState" id="aboutState">
<div id="about_div"> My About Stuff </div>
<input type="radio" name="mainNavState" id="portfolioState">
<div id="portfolio_div"> My Portfolio Stuff </div>
<input type="radio" name="mainNavState" id="contactState">
<div id="contact_div"> My Contact Stuff </div>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

Give all the content a common class. Then use the id of the nav link to create selector for the content to show

$('.main-nav a').click(function(e) {
   e.preventDefault();
  // hide all content class and filter the matching id to show
  $('.content').hide().filter('#' + this.id + '_div').show();
});
.content {
  display: none
}

.content:first-of-type {
  display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css">
</head>

<body>
  <header class="header">
    <ul class="main-nav">
      <li><a id="home" href="#">Home</a></li>
      <li><a id="about" href="#">About</a></li>
      <li><a id="portfolio" href="#">Portfolio</a></li>
      <li><a id="contact" href="#">Contact</a></li>
    </ul>
    <div class="content" id="home_div">home_div</div>
    <div class="content" id="about_div">about_div</div>
    <div class="content" id="portfolio_div"></div>
    <div class="content" id="contact_div">portfolio_div</div>
  </header>
</body>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

To make this work in a generic manner (and therefore keep the JS as short as possible) you can place the id of the target content within the href property of the a elements. Then you can simply toggle() the target div whilst hiding its siblings, like this:

$('.main-nav a').click(function(e) {
  e.preventDefault();
  $($(this).attr('href')).toggle().siblings().hide();
});
#content-container div {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul class="main-nav">
  <li><a href="#home_div">Home</a></li>
  <li><a href="#about_div">About</a></li>
  <li><a href="#portfolio_div">Portfolio</a></li>
  <li><a href="#contact_div">Contact</a></li>
</ul>
<div id="content-container">
  <div id="home_div">Home</div>
  <div id="about_div">About</div>
  <div id="portfolio_div">Portfolio</div>
  <div id="contact_div">Contact</div>
</div>

Upvotes: 3

Related Questions