Skip to content

Instantly share code, notes, and snippets.

@mattclements

mattclements/jsbin.konaq.css

Created July 20, 2014 20:06
Show Gist options
  • Save mattclements/d69f940db34db112e4ac to your computer and use it in GitHub Desktop.
Save mattclements/d69f940db34db112e4ac to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.konaq.css
.expand-section-title {
padding: 5px;
border-top: 1px #ccc solid;
}
.expand-section-title:first-of-type {
border-top: none;
}
.expand-section-title a {
color: #000;
text-decoration: none;
}
.expand-section-content {
display: none;
padding: 5px;
}
.expand-section-content.active {
display: block;
}
Raw
jsbin.konaq.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
</head>
<body>
<section class="expand-section">
<div class="expand-section-title active" data-expand-id="1">
<a href="#">Download Brochure</a>
<i class="fa fa-minus pull-right"></i>
</div>
<div class="expand-section-content active" data-expander-id="1">
<a href="#" class="btn btn-primary">Download Brochure</a>
</div>
<div class="expand-section-title" data-expand-id="2">
<a href="#">Enquiry Form</a>
<i class="fa fa-plus pull-right"></i>
</div>
<div class="expand-section-content" data-expander-id="2">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="expand-section-title" data-expand-id="3">
<a href="#">Contact Telephone Number</a>
<i class="fa fa-plus pull-right"></i>
</div>
<div class="expand-section-content" data-expander-id="3">
01234567890
</div>
<div class="expand-section-title" data-expand-id="4">
<a href="#">Contact Email Address</a>
<i class="fa fa-plus pull-right"></i>
</div>
<div class="expand-section-content" data-expander-id="4">
info@test.com
</div>
</section>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>
Raw
jsbin.konaq.js
$(document).ready(function(){
$('.expand-section-title,.expand-section-title *').click(function(event){
event.preventDefault();
var data_id = false;
if(typeof $(this).data('expand-id') !== 'undefined')
data_id = $(this).data('expand-id');
else if(typeof $(this).parent('.expand-section-title').data('expand-id') !== 'undefined')
data_id = $(this).parent('.expand-section-title').data('expand-id');
if(data_id===false)
return false;
$('.expand-section-title:not([data-expand-id="' + data_id +'"])').removeClass('active');
$('.expand-section-title:not([data-expand-id="' + data_id +'"]) i.fa').removeClass('fa-minus').addClass('fa-plus');
$('.expand-section-content:not([data-expander-id="' + data_id +'"])').slideUp().removeClass('active');
$('.expand-section-title[data-expand-id="' + data_id +'"]').addClass('active');
$('.expand-section-content[data-expander-id="' + data_id +'"]').slideDown().addClass('active');
$('.expand-section-title[data-expand-id="' + data_id +'"] i.fa').removeClass('fa-plus').addClass('fa-minus');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment