打开一个

时间:2018-03-13 14:09:41

标签: bootstrap-accordion

我在同一页面上有多个Bootstrap 3手风琴,一切都运行正常,有唯一的ID等,但是在打开一个没有写大量jQuery的时候,我无法弄清楚如何关闭所有这些。这是我唯一的选择吗?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<section id="home-introductions">
  <div class="container">
    <div class="row-fluid">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="heading-3">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
		          Introductions to AT&amp;T BusinessDirect®
		        </a>
            </h4>
          </div>
          <div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
            <div class="panel-body">
              <h4>AT&amp;T VPN (AVPN) Services Overview</h4>
              <p>Learn how to access, navigate, and understand the standard applications available on AT&amp;T BusinessDirect for AT&amp;T VPN (AVPN) service. The high level overview covers standard applications including Report &amp; Track Troubles, AT&amp;T
                BusinessDirect Map, AVPN Performance Reporting, Business Connections collaboration tool and the billing and Service Level Agreement (SLA) tools. This provides the basis for exploring the AT&amp;T BusinessDirect applications in more detail
                and allows you to understand how AT&amp;T BusinessDirect can best help your business.</p>
              <hr>
              <h4>AT&amp;T BusinessDirect Overview</h4>
              <p>Learn how to navigate on AT&amp;T Business Direct to perform online tasks such as ordering, account management, billing, payment, trouble reporting, and network management.</p>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!--/panel-group-->

    </div>
  </div>
</section>
<section id="home-ebill">
  <div class="container">
    <div class="row-fluid">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="heading-1">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
		          AT&amp;T BusinessDirect® eBill
		        </a>
            </h4>
          </div>
          <div id="collapse-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1">
            <div class="panel-body">
              <h4>AT&amp;T Order Status Manager (OSM) Overview</h4>
              <p>The OSM tool allows you to monitor near real-time order status with a click of the mouse. Easily submit changes and updates to your order. You can update the site address or contact information, and request new circuit installation, turn
                up, or expedited dates. Technical details about your order can also be accessed.</p>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!--/panel-group-->
    </div>
  </div>
</section>
<section id="home-emaintenance">
  <div class="container">
    <div class="row-fluid">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="heading-4">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
		          eMaintenance
		        </a>
            </h4>
          </div>
          <div id="collapse-4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-4">
            <div class="panel-body">
              <h4>Report and Track Troubles</h4>
              <p>This innovative tool enables you to perform trouble reporting tasks online and thereby speed trouble isolation and resolution for your AT&amp;T Services.</p>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!--/panel-group-->
    </div>
  </div>
</section>
<section id="home-toll-free-routing">
  <div class="container">
    <div class="row-fluid">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="heading-5">
            <h5 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5" aria-expanded="false" aria-controls="collapse-5">
		          Toll-Free Routing Tools
		        </a>
            </h5>
          </div>
          <div id="collapse-5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-5">
            <div class="panel-body">
              <h5>Voice Management Tools – AT&amp;T Route It!® (Web-Based) on AT&amp;T BusinessDirect®</h5>
              <p>Learn the differences between AT&amp;T Route It! (PC-Based) and AT&amp;T Route It! (Web-Based) on AT&amp;T BusinessDirect. Learn how to provision IP toll-free (IPTF) terminations and manage IPTF features. It is assumed that attendees have
                knowledge of AT&amp;T Route It! (PC-Based). There will be time for questions at the end of each session.</p>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!--/panel-group-->
    </div>
  </div>
</section>
<section id="home-performance-reporting">
  <div class="container">
    <div class="row-fluid">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="heading-6">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6" aria-expanded="false" aria-controls="collapse-6">
		          Performance Reporting
		        </a>
            </h4>
          </div>
          <div id="collapse-6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-6">
            <div class="panel-body">
              <h4>View Business Reports and Information – Transport AT&amp;T Virtual Private Network (AVPN)</h4>
              <p>Learn how to access and view the View Business Reports &amp; Information tool for Transport and/or Managed AVPN Service. This application provides performance reporting that allows you to analyze your AVPN Services quickly and easily. You
                will become familiar with how to view current or historical performance to help you make informed decisions about your network. You’ll also learn how to run monthly, weekly, daily, hourly, and 10-minute reports for analysis. The reports
                include the following information on your Transport AVPN: MPLS Port List, Port Utilization, COS Utilization, and COS Policing. These reports can be downloaded in a variety of formats.</p>
              <p><a href="">View course dates and times</a></p>
              <hr>
              <h4>View and Analyze Inventory</h4>
              <p>Learn how the View and Analyze Inventory tool enables you to view current or pending inventory – and download it into your own database. You’ll learn how to display over 40 items, such as access circuit ID, master customer number (MCN),
                group revenue code (GRC), address information, and circuit speed.</p>
              <p><a href="#">View course dates and times</a></p>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!--/panel-group-->
    </div>
  </div>
</section>
<section id="home-performance-reporting">
  <div class="container">
    <div class="row-fluid">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="heading-7">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-7" aria-expanded="false" aria-controls="collapse-7">
		          FirstNet
		        </a>
            </h4>
          </div>
          <div id="collapse-7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-7">
            <div class="panel-body">
              <h4>First Net Test One</h4>
              <p>Explore the history of the classic Lorem Ipsum passage and generate your own text using any number of characters, words, sentences or paragraphs. Commonly used as placeholder text in the graphic and print industries, Lorem Ipsum’s origins
                extend far back to a scrambled Latin passage from Cicero in the middle ages.</p>
              <hr>
            </div>
          </div>
        </div>
      </div>
      <!--/panel-group-->
    </div>
  </div>
</section>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

0 个答案:

没有答案