I have successfully implemented a script that expands and collapses. However, I am facing an issue when trying to use two of these scripts on the same page.
I attempted to simply add "_two" to all instances of "accordion," but it doesn't seem to be functioning correctly. What mistake am I making?
The second one is completely messed up in terms of its functionality.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>unique accordion demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#accordion .ui-icon { display: none; }
#accordion a {
border: none;
text-decoration: none;
}
#accordion .ui-accordion-content { border:none; }
#hide {
display: none;
}
#accordiontwo .ui-icon { display: none; }
#accordiontwo a{
border: none;
text-decoration: none;
}
#accordiontwo .ui-accordiontwo-content { border:none; }
#hide{
display: none;
}
</style>
</head>
<body>
<div id="accordion" style="width:750px;margin-left:400px;margin-top:100px;">
<h5 style="background:#73C7F2;text-align:center;" id="topbit"><p id="show">Click here to show Single links</p><p id="hide">Click here to hide split links</p></h5>
<div>
<div style="width:45%;height:40px;background:#ccc;float:left;margin-right:20px;border-radius:5px;padding-top:20px;padding-left:10px;">
<a href="#">Single Link Sample</a>
</div>
</div>
</div>
<div id="accordiontwo" style="width:750px;margin-left:400px;margin-top:100px;">
<h5 style="background:#73C7F2;text-align:center;" id="topbittwo"><p id="showtwo">Click here to show Single links</p><p id="hidetwo">Click here to hide split links</p></h5>
<div>
<div style="width:45%;height:40px;background:#ccc;float:left;margin-right:20px;border-radius:5px;padding-top:20px;padding-left:10px;">
<a href="#">Single Link Sample</a>
</div>
</div>
</div>
<script>
$(function() {
$("#accordion").accordion({ topbit: "h5", collapsible: true, active: false});
});
$("#topbit").click(function(){
$("#hide").toggle();
$("#show").toggle();
});
</script>
<script>
$(function() {
$("#accordiontwo").accordion({ topbittwo: "h5", collapsible: true, active: false});
});
$("#topbittwo").click(function(){
$("#hidetwo").toggle();
$("#showtwo").toggle();
});
</script>
</body>
</html>
View the JSFiddle example by following this link: Unique Accordion Example.