SDCCS: Expandable Bios

Documentation:

HTML:

<div class="bio-outer"> <div class="bio-container"> <div class="bio-inner"> <!-- Bio goes here --> </div> </div> </div>

CSS:

/* Expandable Bios */ .expand-bio { margin-top: 10px; width: 100%; } .bio-outer { margin-bottom: 30px; border-bottom: 1px solid #dedede; padding-bottom: 30px; &:last-child { border: none; } } .bio-container { max-height: 280px; overflow: hidden; transition: 1.2s; }

JS:

$(document).ready(function() { $(document).on('click', '.expand-bio', function(){ var expanded = $(this).attr('data-expanded'); if (expanded == 'true') { $(this).siblings('.bio-container').css('max-height', '280px'); $(this).attr('data-expanded', 'false'); $(this).html('Read More'); } else { var bioheight = $(this).siblings('.bio-container').children('.bio-inner').height() + 100; $(this).siblings('.bio-container').css('max-height', bioheight + 'px'); $(this).attr('data-expanded', 'true'); $(this).html('Collapse Biography'); } }); $( ".bio-container" ).after( "" ); });