Question

Here is my html code:

<div id="bibletree">
  <p id="gen">Genesis</p>
  <p class="gen">01</p>
  <p class="gen">02</p>
  <p class="gen">03</p>
  <p class="gen">04</p>
  <p id="exo">Exodus</p>
  <p class="exo">01</p>
  <p class="exo">02</p>
  <p class="exo">03</p>
  <p class="exo">04</p>
  <p id="lev">Leviticus</p>
  <p class="lev">01</p>
  <p class="lev">02</p>
  <p class="lev">03</p>
  <p class="lev">04</p>     
</div>

Javascript:

$("#bibletree p").click(function() {
  $(".gen").slideToggle(400)
});

As you can see, I am matching any and all <p> tags inside the bibletree <div>. I want to know how to only toggle those <p> that have the class that is the same as id of the clicked element. So, instead of toggling .gen it will toggle .[id of <p> that was clicked]. What I am asking for is reminiscent of regex references. Any ideas?

Answer 1

jsBin demo

$("#bibletree p[id]").click(function() {
  $("."+this.id).slideToggle(400);
});

---

EDIT:
if you want to remove all (unnecessary?) classes you could do:

$("#bibletree p[id]").click(function() {
  $(this).nextUntil('p[id]').slideToggle(400);
});

jsBin demo

<div id="bibletree">
  <p id="title">Genesis</p>
  <p>01</p>
  <p>02</p>
  <p>03</p>
  <p>04</p>
  <p id="title">Exodus</p>
  <p>01</p>
  <p>02</p>
  <p>03</p>
  <p>04</p>
  <p id="title">Leviticus</p>
  <p>01</p>
  <p>02</p>
  <p>03</p>
  <p>04</p>     
</div>

CSS:

#bibletree p{
  display:none;
}
#title{
 display:block;
}