On Load And On Click Hide/show Div

What I want to do is to have all paragraphs but #p0 hidden on load. Additionally I want to show a paragraph if user clicks on it's sibling span, and hide all other paragraphs

Solution 1:

$('p:not("#p0")').hide();

$('span').on('click',function() {
    $('p').hide();
    $(this).next('p').show();
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul><li><h1><spanid="span0">Lorem</span><pid="p0">Lorem ipsum dolor sit amet,</p></h1></li><li><h1><spanid="span1">Lorem2</span><pid="p1">Lorem ipsum dolor sit amet,</p></h1></li><li><h1><spanid="span2">Lorem3</span><pid="p2">Lorem ipsum dolor sit amet,</p></h1></li></ul>

If you wish to isolate this from other p's / span's on the page you could use the 'prefixed-by' attribute selector (^=) ...

$('p[id^="p"]:not("#p0")').hide();

$('span[id^="span"]').on('click',function() {
    $('p[id^="p"]').hide();
    $(this).next('p[id^="p"]').show();
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ul><li><h1><spanid="span0">Lorem</span><pid="p0">Lorem ipsum dolor sit amet,</p></h1></li><li><h1><spanid="span1">Lorem2</span><pid="p1">Lorem ipsum dolor sit amet,</p></h1></li><li><h1><spanid="span2">Lorem3</span><pid="p2">Lorem ipsum dolor sit amet,</p></h1></li></ul>

Solution 2:

$('#p0').hide();

$('span').on('click',function() {
    $('p').hide();
    $(this).next('p').show();
});

Solution 3:

<ul><li><h1><spanid="span0"class="spanclick">Lorem</span><pid="p0"class="par1">Lorem ipsum dolor sit amet,</p></h1></li><li><h1><spanid="span1"class="spanclick">Lorem2</span><pid="p1"class="par1">Lorem ipsum dolor sit amet,</p></h1></li><li><h1><spanid="span2"class="spanclick">Lorem3</span><pid="p2"class="par1">Lorem ipsum dolor sit amet,</p></h1></li><script>
$(document).ready(function () {
  $(".par1").hide();
  $(".spanclick").click(function(){
    $(".par1").toggle();

  });
});

Share