简单的手风琴效果,可以手动控制指定打开某一项目-freejs.net代码演示

首页>>Jquery文字>>简单的手风琴效果,可以手动控制指定打开某一项目(2019-11-05)

简单的手风琴效果,可以手动控制指定打开某一项目

XML/HTML Code

<div id="wrapper">
<p class="controls"><button onClick="$().accordiom.openAll('#accordion1');">Open All</button> <button onClick="$().accordiom.closeAll('#accordion1');">Close All</button> <button onClick="$().accordiom.openItem('#accordion1', 2);">Open Accordion 3</button></p>
<div id="accordion1">
<div class="accordionButton"><h2><i class="fas fa-question-circle"></i> What is jQuery?</h2></div>
<div class="accordionContent">
<p>jQuery is a JavaScript library (NOT A FRAMEWORK) created for faster, easier and cross-browser web design.</p>
<p>jQuery is a gracefully, feature-rich JavaScript library that simplifies web animations, DOM manipulation, event handling, etc.</p>
</div>
<div class="accordionButton"><h2><i class="fas fa-question-circle"></i> What Is jQuery Slim Build?</h2></div>
<div class="accordionContent">
<p>The slim build of jQuery is introduced in the jQuery 3.0 final release that is created to reduce the jQuery size and improve the page load speed.</p>
<p>Slim build is about 6k gzipped bytes smaller than the regular version – 23.6k vs 30k. It excludes ajax, effects, and currently deprecated code. </p>
</div>
<div class="accordionButton"><h2><i class="fas fa-question-circle"></i> Who Are Using jQuery?</h2></div>
<div class="accordionContent">
<p>A study shows that jQuery is used by 74.1% of all the websites (July 2019).</p>
</div>
</div>
<script type="text/javascript">
$(document).ready( function () {
$('#accordion1').accordiom();
});
</script>
</div>