Bootstrap实现手风琴效果

Bootstrap实现手风琴效果

用Bootstrap实现手风琴效果中，其实主要用到的就是一些折叠插件。

效果展示：

每次只展开一个部分的内容。

实现的代码：

    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse1" data-toggle="collapse" data-parent="#accordion">第一部分链接a>
                h4>
            div>
            <div id="collapse1" class="panel-collapse collapse" > 
                <div class="panel-body">第一部分内容div>
            div>
        div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse2" data-toggle="collapse" data-parent="#accordion">第二部分链接a>
                h4>
            div>
            <div id="collapse2" class="panel-collapse collapse" > 
                <div class="panel-body">第一部分内容div>
            div>
        div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse3" data-toggle="collapse" data-parent="#accordion">第三部分链接a>
                h4>
            div>
            <div id="collapse3" class="panel-collapse collapse" >
                <div class="panel-body">第三部分内容div>
            div>
        div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse4" data-toggle="collapse" data-parent="#accordion">第四部分链接a>
                h4>
            div>
            <div id="collapse4" class="panel-collapse collapse" >
                <div class="panel-body">第四部分内容div>
            div>
        div>
    div>

    
    <div class="panel-group" id="accordion1">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse5" data-toggle="collapse">第一部分链接a>
                h4>
            div>
            <div id="collapse5" class="panel-collapse collapse" > 
                <div class="panel-body">第一部分内容div>
            div>
        div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse6" data-toggle="collapse">第二部分链接a>
                h4>
            div>
            <div id="collapse6" class="panel-collapse collapse" > 
                <div class="panel-body">第一部分内容div>
            div>
        div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse7" data-toggle="collapse">第三部分链接a>
                h4>
            div>
            <div id="collapse7" class="panel-collapse collapse" >
                <div class="panel-body">第三部分内容div>
            div>
        div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse8" data-toggle="collapse">第四部分链接a>
                h4>
            div>
            <div id="collapse8" class="panel-collapse collapse" >
                <div class="panel-body">第四部分内容div>
            div>
        div>
    div>


    //js代码
    <script type="text/javascript">
        //手风琴折叠效果
        $('#collapse5, #collapse6, #collapse7, #collapse8').collapse({
            parent:'#accordion1',
            toggle:false
        })  
    script>