javascript - Get element's index in selector of multiple elements -

i have group of essential dropdown lists on page. each list has heading. when heading clicked, list's height transition 0 whatever height of list in pixels; animates make list grow position.

because of restrictions in css, can not transition height auto. must transition height numerical value. because height if each list different, work around follows:

1. when page loads, lists open
2. grab height of each list in pixels, , put array heights
3. set each list's height 0, hide them.
4. when list's heading clicked, transition height stored in array

the problem i'm having trying associate index of number in heights index of div hat has been clicked on page. here sample of 2 lists.

<div id="awards">     <div class="content">         <div>             <h1>alien 3</h1>             <div>                 <h2>nominated</h2><hr>                 <p>hugo award best dramatic presentation</p>                 <p>saturn award best director</p>             </div>         </div>         <div>             <h1>se7en</h1>             <div>                 <h2>won</h2><hr>                 <p>fantasporto best film</p>             </div>         </div>         ... 

and click event's jquery:

$('#awards h1').click(function () {      var indexpos = $(this).index('#awards .content div div'); //get index of clicked element out of '#awards .content div div's (the lists)      if ($(this).hasclass('open')) {          $('#awards .content div div').index(indexpos).css('height', heights[indexpos]);      } else if (!$(this).hasclass('open')) {          $('#awards .content div div').index(indexpos).css('height', '0');      }      $(this).toggleclass('open');  }); 

and measure, here how array being created when document loads:

var heights = [];  $('#awards .content div div').each(function(index, element) {         heights.push($(this).height()); });  $('#awards .content div div').css('height','0'); 

so, missing? when check value of indexpos after setting it, it's -1, aka not found. might have misunderstanding of how .index() works, how fix it?

i don't think using height best idea, can toggle display property hide/display element.

but if still want use height, instead of array try using data property like

$('#awards h1').click(function () {     var $this = $(this),         $div = $this.next();      if ($(this).hasclass('open')) {         $div.height($div.data('height'));     } else if (!$(this).hasclass('open')) {         $div.height(0);     }      $(this).toggleclass('open');  });   $('#awards .content div div').each(function (index, element) {     $(this).data('height', $(this).height()) }).height(0); 

---

i don't know exact requirement, can simplified as

$('#awards h1').click(function() {    $(this).toggleclass('open');  });

#awards h1 + div {    display: none;  }  #awards h1.open {    color: green;  }  #awards h1.open + div {    display: block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="awards">    <div class="content">      <div>        <h1>alien 3</h1>        <div>          <h2>nominated</h2>          <hr/>          <p>hugo award best dramatic presentation</p>          <p>saturn award best director</p>        </div>      </div>      <div>        <h1>se7en</h1>        <div>          <h2>won</h2>          <hr/>          <p>fantasporto best film</p>        </div>      </div>    </div>  </div>