JQuery Equal Heights Click

by DannyEnglander

HTML

<script src="http://www.cssnewbie.com/download/jquery.equalheights.js"></script>
<div class="people-view">

<ul>
  <li class="first odd">
      
<span class="views-bio-left equal-title">
<img src="http://lorempixel.com/120/120/nature/8/">
</span>

<span class="views-bio-right equal-title">

  <span class="field-group-format-toggler-abstract closed">
    <h2>Jane Doe</h2>
  </span>

<h3>Senior Network Architect</h3>

<span class="field-group-format-wrapper" style="display: none;">
  <p>Ad antehabeo autem consequat fere jus letalis nisl patria tego. Ad aptent esse eum fere ibidem iusto pecus
    secundum. Abico gemino importunus luptatum nulla oppeto vel wisi. Eligo luptatum mauris nostrud tincidunt ulciscor
    vel. Elit exerci fere imputo incassum lobortis patria.</p>
    
      <p>Ad antehabeo autem consequat fere jus letalis nisl patria tego. Ad aptent esse eum fere ibidem iusto pecus
    secundum. Abico gemino importunus luptatum nulla oppeto vel wisi. Eligo luptatum mauris nostrud tincidunt ulciscor
    vel. Elit exerci fere imputo incassum lobortis patria.</p>
    
</span>
</span>
  </li>
  <li class="even">
      
<span class="views-bio-left equal-title">
<img src="http://lorempixel.com/120/120/nature/8/">
</span>

<span class="views-bio-right equal-title">

  <span class="field-group-format-toggler-abstract">
    <h2>Amet Sino</h2>
  </span>

<h3>Management Information Systems Director</h3>

<span class="field-group-format-wrapper" style="display: none;">
  <p>Capto molior nutus qui te venio. Causa comis diam dolore fere pagus pertineo tum. Esca esse minim pagus pertineo
    ratis sino verto. Bene damnum esse exputo genitus ille nulla olim. Consequat duis ludus praemitto rusticus secundum
    sudo. Aliquip erat hendrerit melior secundum</p>  
      
      <p>Ad antehabeo autem consequat fere jus letalis nisl patria tego. Ad aptent esse eum fere ibidem iusto pecus
    secundum. Abico gemino importunus luptatum nulla oppeto vel wisi. Eligo luptatum mauris...

CSS

li { 
 margin-right: 5px; 
background-color: #ccc; 
    margin-bottom: 10px;
}

li.odd {
    background-color: #eaeaea;
}

.views-bio-left {
  float: left;
  width: 130px;
  margin: 0;
}

.views-bio-right {
  float: left;
  width: 80%;
  margin: 0;
}

.people-view li {
  list-style: none;
  overflow: hidden;
}

span {
    display: block;
}

.field-group-format-toggler-abstract {
    cursor: pointer;
}

p {
    margin: 10px 0;
}

h2 {
    font-size: 1.3em;
}

JavaScript

// Toggle the content open.
$(".field-group-format-toggler-abstract").click(function () {
    var $span = $(this).nextAll(".field-group-format-wrapper");
    $span.toggle();
    $(this).toggleClass('open', $span.is(':visible'));
    $(this).toggleClass('closed', $span.is(':hidden'));
});

 // Default equal heights on page load.
$(window).load(function () {
    $(".equal-title").equalHeights();
});

// Equal heights for expanded text.
// This one expands all hidden text spans, not just the indivudial span being expanded
$(window).click(function () {
    $(".field-group-format-toggler-abstract").each(function () {
        $(".equal-title").css('height','auto').equalHeights();
    });
});

/*
// does not work either
$(function(){
    $(".field-group-format-toggler-abstract").click(function() {
        $(".equal-title").css('height','auto').equalHeights();
    });
});
*/