CODEWITHSUNDEEP
jqueryhtmlcsslist
Robin
Robin

Reputation: 485

How to list list element but hide paragraph and display only when the list element is clicked?

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>

Upvotes: 0

Views: 280

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

You can, in many browsers, achieve this with CSS alone by (ab)using <label> and <input> elements along with the :checked selector.

Given the following HTML:

<div>
    <ul>
        <li><label for="li1">List 1</label><input type="checkbox" id="li1" />
            <p>Paragraph of list 1</p>
        </li>
        <li><label for="li2">List 2</label><input type="checkbox" id="li2" />
            <p>Paragraph of list 2</p>
        </li>
        <li><label for="li3">List 3</label><input type="checkbox" id="li3" />
            <p>Paragraph of list 3</p>
        </li>
    </ul>
</div>

It's possible to show multiple <p> elements (using <input type="checkbox" />:

li input[type=checkbox] {
    width: 0;
    height: 0;
}

li p {
    display: none;
}

li input:checked ~ p {
    display: block;
}

JS Fiddle demo.

Or, using <input type="radio" />, it's possible to show only one (at most) <p> element:

<div>
    <ul>
        <li><label for="li1">List 1</label><input name="pToggle" type="radio" id="li1" />
            <p>Paragraph of list 1</p>
        </li>
        <li><label for="li2">List 2</label><input name="pToggle" type="radio" id="li2" />
            <p>Paragraph of list 2</p>
        </li>
        <li><label for="li3">List 3</label><input name="pToggle" type="radio" id="li3" />
            <p>Paragraph of list 3</p>
        </li>
    </ul>
</div>

With the CSS:

li input[type=radio] {
    width: 0;
    height: 0;
}

li p {
    display: none;
}

li input:checked ~ p {
    display: block;
}

JS Fiddle demo.

References:

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

You need to try using jQuery

HTML

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

Jquery

$("p").hide();
$("li").click(function(){
  $("p").hide();
  $(this).children("p").show();  
});

DEMO

Upvotes: 2

Related Questions