How to list the item in the list but hide the paragraph and display it only when the item in the list is clicked?

advertisements

I want display list first when clicking list element(e.g list 1) it should show up paragraph related to it and when clicking another list element (e.g. list 2), it should again hide previous paragraph related to previous element and display paragraph related to this list element(list 2). The paragraph could be in another div Thank you in advance.

<div>
<ul>
<li class="servicelist">List 1</li>
<p class="servicepara">Paragraph of list 1</p>
<li class="servicelist">List 2</li>
<p class="servicepara">Paragraph of list 2</p>
<li class="servicelist">List 3</li>
<p class="servicepara">Paragraph of list 3</p>
</ul>
</div>


First you need to correct your mark up as li and ul is not closed properly, see below html :

<div>
   <ul>
    <li>List 1</li>
    <p>Paragraph of list 1</p>
    <li>List 2</li>
    <p>Paragraph of list 2</p>
    <li>List 3</li>
    <p>Paragraph of list 3</p>
   </ul>
</div>

Try this

$(document).ready(function(){
  $("p").hide();
  $("ul li").click(function(){
      $(this).siblings("p").hide();
      $(this).next().show();
  });
});

Working JSFiddle

As said in updated Question, there are multiple divs. So to target

<li class="servicelist">List 1</li>
<p class="servicepara">Paragraph of list 1</p>

You can use below code :

$(document).ready(function(){
      $("p.servicepara").hide();
      $("li.servicelist").click(function(){
          $(this).siblings("p.servicepara").hide();
          $(this).next().show();
      });
    });

Working Demo for updated code