Skip to content

Instantly share code, notes, and snippets.

@junieldantas
Last active September 26, 2016 19:34
Show Gist options
  • Save junieldantas/c754f4cdfe715be78d4295caf6684e59 to your computer and use it in GitHub Desktop.
Save junieldantas/c754f4cdfe715be78d4295caf6684e59 to your computer and use it in GitHub Desktop.
Collapse Toggle Icon
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title></title>
</head>
<body>
<a href='#demo' class="btn btn-info" data-toggle="collapse"><i class='fa fa-minus'></i></a>
<div id="demo" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
<script>
$("[data-toggle='collapse']").click(function(){
$(this).find('i').toggleClass('fa-minus fa-plus');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment