I've been experimenting with some code and it's gotten pretty lengthy. It works fine with just a few divs, but what if I need to implement this on 20 or more...?
Is there a way to condense the code I've written?
(I'm still new to jquery and trying to create complex functions.)
Can anyone offer assistance?
You can view the fiddle here: http://jsfiddle.net/Ud574/27/
The code is shown below.
$(document).ready(function(){
$('.button').click(function() {
$('.content').hide(500)
$('.headOne').addClass("classRight");
$('.content1').show(500)
});
$('.button1').click(function() {
$('.content1').hide(500)
$('.headTwo').addClass("classRight");
$('.content2').show(500)
});
$('.button2').click(function() {
$('.content2').hide(500)
$('.headThree').addClass("classRight");
$('.content3').show(500)
});
$('.button3').click(function() {
$('.content3').hide(500)
$('.headFour').addClass("classRight");
$('.buttonLast').click(function() {
$('.content').show(500)
$('.headOne,.headTwo,.headThree, .headFour').removeClass("classRight");});
});
});
<doctype html>
<html>
<head>
<title> div collapse</title>
</head>
<body>
<div class="headOne"> Employee personal record</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum <br />
<div class="button">Click me</div>
<br />
</div>
<div class="headTwo"> Employee personal record</div>
<div class="content1">Pellentesque felis elit, tempor vitae dapibus facilisis, sollicitudin id diam. <br />
<br />
<div class="button1">Click me</div>
</div>
<div class="headThree"> Employee personal record</div>
<div class="content2">Aliquam id lectus pellentesque viverra<div class="button2">Click me</div></div>
<div class="headFour"> Employee personal record</div>
<div class="content3">Aliquam a magna ac lacus eget porta. Maecenas viverra mi id lectus pellentesque viverra</div>
<div class="button3">Click me</div><br />
<br />
<div class="button4">Go To Previous section </div></div>
<div class="buttonLast">Go To Previous section </div>
</body>
</html>