Getting Div ID on Header Click, Accordion

Question

I'm using Jquery accordion to populate a dynatree. I need my accordion div's to populate on click of the header, so that is why I am trying to grab div id. This Jquery works but only when I click inside the expanded div and not the header. Which makes sense because my event is .common click.

 $(".common").click(function () {
        var currentID = $(this).attr("id");
        alert(currentID);
    });    

 <div id="accordion">         
    <h3>Project Type</h3>
     <div id="1" class="common" style="height:150px;"> 
    </div>

    <h3>Ammenities</h3>
    <div id="2" class="common" style="height:150px;">  
    </div>
 </div>

I need to figure out how I can get div id on header click. Accordion doesn't play very nicely so if i switch my id and class onto the header, the event doesn't fire. I've tried using $("#accordion .common").click and this doesn't work either

Answer 1

You can target the h3 elements which are the previous sibling of a .common element

$(".common").prev('h3').click(function () {
    var currentID = $(this).next().attr("id");
    alert(currentID);
}); 

Demo: Fiddle

or you can target the h3 elements which are the children of #accordion element

$("#accordion > h3").click(function () {
    var currentID = $(this).next().attr("id");
    alert(currentID);
}); 

Demo: Fiddle