LFPR

by Mike Zavarello

HTML

<div id="SectionOneHeader" class="SectionHeader" textpart="SectionOneText">section one header</div>
<div id="SectionOneText" class="SectionText">
    <p>section one text</p>
    <p>Bacon ipsum dolor sit amet doner aute reprehenderit beef ribs tail drumstick. Biltong pariatur short loin ex velit, prosciutto ea laborum in hamburger consequat. Rump prosciutto est, leberkas dolore excepteur aute sirloin laboris drumstick bresaola venison dolor ad. Adipisicing ea pancetta ut. Jowl proident tongue, in leberkas tail aliquip kevin turducken pancetta pig capicola.</p>
    <p>Sed pancetta chuck occaecat, cillum eiusmod ribeye ad deserunt doner nulla quis ball tip strip steak fatback. Non corned beef jowl bresaola, enim shankle laborum filet mignon exercitation landjaeger. Landjaeger in t-bone porchetta do jerky pariatur doner esse quis turducken frankfurter hamburger est. Turducken incididunt biltong landjaeger. Meatloaf landjaeger incididunt shank nisi velit non ullamco tenderloin leberkas commodo.</p>
    <p>Pork belly fatback landjaeger, tempor filet mignon jowl pig. Non ex flank, landjaeger nostrud swine tail do enim short ribs occaecat in ham hock. Officia anim nisi, aute non brisket ground round short loin. Short ribs shankle meatloaf, do excepteur aliqua beef ut eiusmod short loin minim reprehenderit. Consequat ham cupidatat boudin, jowl brisket commodo flank officia id turducken drumstick tenderloin est laborum.</p></div>
<div id="SectionTwoHeader" class="SectionHeader" textpart="SectionTwoText">section two header</div>
<div id="SectionTwoText" class="SectionText">
    <p>section two text</p>
    <p>Bacon ipsum dolor sit amet doner aute reprehenderit beef ribs tail drumstick. Biltong pariatur short loin ex velit, prosciutto ea laborum in hamburger consequat. Rump prosciutto est, leberkas dolore excepteur aute sirloin laboris drumstick bresaola venison dolor ad. Adipisicing ea pancetta ut. Jowl proident tongue, in leberkas tail aliquip kevin turducken pancetta pig...

CSS

@import url('http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300');
.SectionHeader {
    background: #0e4768;
    border-bottom: 1px solid #86a3b3;
    display: block;
    font: 24px 'Roboto Condensed';
	color: #ffffff;
    height: 120px;
    padding: 20px;
    width: 100%;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}
.SectionHeader:hover { background: #768f40; }
.SectionText { 
    display: none;
    height: auto;
    padding: 20px 0;
    width: 100%;
}

JavaScript

var activeText = '';

$(".SectionHeader").click(function(event){
    //console.log(this.id);
    //console.log($(this).attr('textpart'));
    
    
    if (activeText != $(this).attr('textpart')){  
        $(".SectionText").slideUp();
        $("#" + $(this).attr('textpart')).slideDown();
        activeText = $(this).attr('textpart');
    } else { 
        $(".SectionText").slideUp();
        activeText = '';
    }
    
    
});