jquery ui widget accordion open with external button control
how can i open and 开发者_如何学JAVAclose Jquery UI Accordian widget with external control (button/anchor).
I figured it out by myself, as shown below. Suppose this is your jquery UI according consisting of four accordians.
<div id="accordion" class="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<div>
<h3><a href="#">Fourth</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
Now add external anchors with their different ID's
<!-- Enternal Anchor Mossawir -->
<div>
<a href="#" id="openfirst">Open 1st</a>
<a href="#" id="opensecond">Open 2nd</a>
<a href="#" id="openthird">Open 3rd</a>
<a href="#" id="openfourth">Open 4th</a>
</div>
Now add jquery code.
$(function(){
$("#accordion").accordion({ header: "h3" });
//this will open 1st accordian.
$('#openfirst').click(function(){
$(".accordion").accordion({active:0});
});
//this will open 2nd accordian.
$('#opensecond').click(function(){
$(".accordion").accordion({active:1});
});
//this will open 3rd accordian.
$('#openthird').click(function(){
$(".accordion").accordion({active:2});
});
//this will open 4th accordian.
$('#openfourth').click(function(){
$(".accordion").accordion({active:3});
});
});
To add more accordions and anchor, simply add an new id to anchor and in jquery code will give its active parameter. active:0 means 1st accordion, active:1 means the second accordian and so on. this works for Jquery UI accordion. Here is an example: http://jsfiddle.net/ZRBc6/1/
.accordion( "activate" , index )
will do this for you. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass
false
to close all (only possible with
collapsible:true
).
I have created a accordian look and feel on buttons external to the divisions. This is how it looks.
<!DOCTYPE html>
<html>
<head>
<script>
function doFunction(buttonId) {
if(buttonId=="1"){
document.getElementById("collapseTwo").className = "panel-collapse collapse";
document.getElementById("collapseThree").className = "panel-collapse collapse";
}
if(buttonId=="2"){
document.getElementById("collapseOne").className = "panel-collapse collapse";
document.getElementById("collapseThree").className = "panel-collapse collapse";
}
if(buttonId=="3"){
document.getElementById("collapseTwo").className = "panel-collapse collapse";
document.getElementById("collapseOne").className = "panel-collapse collapse";
}
}
</script>
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.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>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<button id="id1" type="button" class="btn btn-info" onclick="doFunction('1');" data-toggle="collapse" data-target="#collapseOne">Simple collapsible1</button><br/>
<button id="id2" type="button" class="btn btn-info" onclick="doFunction('2');" data-toggle="collapse" data-target="#collapseTwo">Simple collapsible2</button><br/>
<button id="id3" type="button" class="btn btn-info" onclick="doFunction('3');" data-toggle="collapse" data-target="#collapseThree">Simple collapsible3</button><br/>
<div id="demu" style="padding-left:15%">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
For Opening you can use active method with index of element to be opened
$('#accordion').accordion({
active:0
});
For Closing
$('#accordion').accordion({
active:false
});
you can refer customised JQuery UI Accordion Sample at following fiddle https://jsfiddle.net/Kuldipg/35xp2w0f/
加载中,请稍侯......
精彩评论