CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Nathaniel Rand
Nathaniel Rand

Reputation: 571

How do I create accordion style collapsing on bootstrap data-target?

I have multiple collapsing data-targets. I would like only 1 collapsible to be activated at a time.

My goal: Upon clicking on a different collapsing object, the previous object would "re-collapse".

I originally assumed the re-organization of the html but then began to wonder about Javascript.

Any recommendations? I love all opinions.

Thanks

Un-collapsed:

Un-collapsed

First collapse is deployed:

First collapse is deployed

Second Collapse activated while first collapse is still deployed:

Second Collapse activated while first collapse is still deployed

HTML/Bootstrap

<!--Collapsible Button Group -->

    <div class="col-md-4">
         <li data-toggle="collapse" data-target="#collapseNetwork" aria-expanded="false" aria-controls="collapseNetwork" class="btn btn-link">
            <%= link_to "", "#", class:'fa fa-users' %>
        </li>
    </div>

    <div class="col-md-4">
        <li data-toggle="collapse" data-target="#collapseModifications" aria-expanded="false" aria-controls="collapseModifications" class="btn btn-link">
            <%= link_to "", "#", class:'fa fa-male' %>
        </li>
    </div>

    <div class="col-md-4">
        <li data-toggle="collapse" data-target="#collapseAccolades" aria-expanded="false" aria-controls="collapseAccolades" class="btn btn-link">
            <%= link_to "", "#", class:'fa fa-diamond' %>
        </li>
    </div>

        <!--Collapsed Data Group-->
        <div class="collapse" id="collapseNetwork"><br /><br />
        <div class="panel">
            <h3>NETWORK</h3><hr />
            <ul class="media-list media-list-users list-group">
              <li class="list-group-item">
                <div class="media">
                  <a class="media-left" href="#">
                    <%= image_tag @user.profile.avatar.url(:thumb), class:'media-object img-circle' %>
                  </a>
                  <div class="media-body">
                    <button class="btn btn-primary-outline btn-sm pull-right">
                      <span class="icon icon-add-user"></span> Follow
                    </button>
                    <strong>Jane Smith</strong>
                    <small>@jcs - San Francisco</small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="media">
                  <a class="media-left" href="#">
                    <%= image_tag @user.profile.avatar.url(:thumb), class:'media-object img-circle' %>
                  </a>
                  <div class="media-body">
                    <button class="btn btn-primary-outline btn-sm pull-right">
                      <span class="icon icon-add-user"></span> Follow
                    </button>
                    <strong>John Smith</strong>
                    <small>@jcs - Anywhere</small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="media">
                  <a class="media-left" href="#">
                    <%= image_tag @user.profile.avatar.url(:thumb), class:'media-object img-circle' %>
                  </a>
                  <div class="media-body">
                    <button class="btn btn-primary-outline btn-sm pull-right">
                      <span class="icon icon-add-user"></span> Follow
                    </button>
                    <strong>Nathaniel</strong>
                    <small>@njr - Charleston</small>
                  </div>
                </div>
              </li>
            </ul>
        </div>
    </div>

    <div class="collapse" id="collapseModifications"><br /><br />
        <div class="panel">
            <h3>MODIFICATIONS</h3>

        </div>
    </div>

    <div class="collapse" id="collapseAccolades"><br /><br />
        <div class="panel">
            <h3>ACCOLADES</h3>
        </div>
    </div>

Upvotes: 0

Views: 1418

Answers (1)

Nathaniel Rand
Nathaniel Rand

Reputation: 571

Solution: I changed the bootstrap from "collapsible" to "accordion". Thanks @Rob.

The basic solution is below. Thanks @Sherbrow. The full discussion can be found here: stackoverflow

<div id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys  <span class="badge badge-info pull-right">X</span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>

<div class="accordion-group">
    <div class="collapse indent" id="keys">
        keys
    </div>

    <div class="collapse indent" id="attrs">
        attrs
    </div>

    <div class="collapse" id="edit">
        edit
    </div>
</div>

Now that the code is cleaned up a bit, the problem still had to be addressed.

Problem(continued): The auto-collapse transition that restricts more than one panel from being opened at a time was still a problem.

Solution: I had to change the data class from "accordion-group" to "panel"

Upvotes: 1

Related Questions