CODEWITHSUNDEEP
javascriptjqueryhtml
Corentin Branquet
Corentin Branquet

Reputation: 1576

Show a specific <div> on click()

I have this code 

$('.description').hide();

$('li').click(function() {
    
  var id = $(this).attr("id");
 
  $('#product-' + id).show();
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id="product-1">Product 1</li>
    <li id="product-2">Product 2</li>
    <li id="product-3">Product 3</li>
    <li id="product-4">Product 4</li>
</ul>

<div class="description-container">
    <div class="description" id="product-1">
        <h2>Product 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
    </div>
    <div class="description" id="product-2">
        <h2>Product 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
    </div>
    <div class="description" id="product-3">
        <h2>Product 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
    </div>
    <div class="description" id="product-4">
        <h2>Product 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
    </div>
</div>

What I want is when I click on li#product-1 , .description-container #product-1 appears.

Same thing if I click on li#product-2, etc.

I try something in jQuery but it does not work.

Upvotes: 1

Views: 36

Answers (3)

Paul Roub
Paul Roub

Reputation: 36438

First, prepending #product- to the the ids of your li elements will give something like "#product-product-1", which won't match anything.

Even if we did correct that, you can't have multiple elements with the same id -- there's no differentiation li#product-1 from div#product-1. ids must be unique; best-case, you'll select the li itself since it's the first match.

Instead, add a data-... attribute to the lis, and use that:

$('.description').hide();

$('li').click(function() {
    
  var id = $(this).data("target");
 
  $('#product-' + id).show();
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li data-target="1">Product 1</li>
    <li data-target="2">Product 2</li>
    <li data-target="3">Product 3</li>
    <li data-target="4">Product 4</li>
</ul>

<div class="description-container">
    <div class="description" id="product-1">
        <h2>Product 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
    </div>
    <div class="description" id="product-2">
        <h2>Product 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
    </div>
    <div class="description" id="product-3">
        <h2>Product 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
    </div>
    <div class="description" id="product-4">
        <h2>Product 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
    </div>
</div>

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly you are appending the li id to product- which means you're looking for elements called product-product-1, which don't exist. Secondly your HTML has duplicate id attributes on the li and the related div elements which is invalid.

A better approach would be to use the index() from the clicked li to find the related .description. Try this:

$('li').click(function() {
  $('.description').hide().eq($(this).index()).show();
});
.description {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
  <li>Product 4</li>
</ul>

<div class="description-container">
  <div class="description">
    <h2>Product 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
  </div>
  <div class="description">
    <h2>Product 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
  </div>
  <div class="description">
    <h2>Product 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
  </div>
  <div class="description">
    <h2>Product 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
  </div>
</div>

Upvotes: 2

nitish koundade
nitish koundade

Reputation: 801

$('.description').hide();

$('li').click(function() {
    
  var id = $(this).attr("id");
 
  $('#div-'+id).show();
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id="product-1">Product 1</li>
    <li id="product-2">Product 2</li>
    <li id="product-3">Product 3</li>
    <li id="product-4">Product 4</li>
</ul>

<div class="description-container">
    <div class="description" id="div-product-1">
        <h2>Product 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
    </div>
    <div class="description" id="div-product-2">
        <h2>Product 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
    </div>
    <div class="description" id="div-product-3">
        <h2>Product 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
    </div>
    <div class="description" id="div-product-4">
        <h2>Product 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
    </div>
</div>

Change the id of the description div and the selector for hiding the div.

Upvotes: 0

Related Questions