<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collapsible Methods</h2>
<p>The toggle method toggles the collapsible content.</p>
<p>The show method shows the collapsible content.</p>
<p>The hide method hides the collapsible content.</p>
<button id="t" type="button" class="btn btn-primary">Toggle</button>
<button id="s" type="button" class="btn btn-success">Show</button>
<button id="h" type="button" class="btn btn-warning">Hide</button>
<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#c">Simple collapsible</button>
<button type="button" class="btn btn-success" id="hh" data-toggle="collapse" data-target="#c">
<span class="glyphicon glyphicon-collapse-down"></span> Open
</button>
<div id="c" class="collapse">
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>
hgjhgjhgjh
</div>
<script>
$(document).ready(function () {
$("#c").on("hide.bs.collapse", function () {
$("#hh").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#c").on("show.bs.collapse", function () {
$("#hh").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
$(document).ready(function () {
$("#t").click(function () {
$("#c").collapse('toggle');
});
$("#s").click(function () {
$("#c").collapse('show');
});
$("#h").click(function () {
$("#c").collapse('hide');
});
});
</script>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collapsible Methods</h2>
<p>The toggle method toggles the collapsible content.</p>
<p>The show method shows the collapsible content.</p>
<p>The hide method hides the collapsible content.</p>
<button id="t" type="button" class="btn btn-primary">Toggle</button>
<button id="s" type="button" class="btn btn-success">Show</button>
<button id="h" type="button" class="btn btn-warning">Hide</button>
<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#c">Simple collapsible</button>
<button type="button" class="btn btn-success" id="hh" data-toggle="collapse" data-target="#c">
<span class="glyphicon glyphicon-collapse-down"></span> Open
</button>
<div id="c" class="collapse">
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>
hgjhgjhgjh
</div>
<script>
$(document).ready(function () {
$("#c").on("hide.bs.collapse", function () {
$("#hh").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#c").on("show.bs.collapse", function () {
$("#hh").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
$(document).ready(function () {
$("#t").click(function () {
$("#c").collapse('toggle');
});
$("#s").click(function () {
$("#c").collapse('show');
});
$("#h").click(function () {
$("#c").collapse('hide');
});
});
</script>
</body>
</html>
No comments:
Post a Comment