title: bootstrap accordion menu
body: <p>My problem is that i used the bootstrap accordion menu for my wordpress site.</p>
  
  <p>Every menu item has sub menus as links so whenever I clicked on any link it toke me to another page meaning the page reloaded, but the accordion menu gets closed and I want it to remain open with the selected link.</p>
  
  <p>My whole site is on bootstrap. I am new to wordpress so don't even know that which jquery function is working on this accordion menu.</p>
  
  <p>Here is my code for accordion menu:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="accordion2" class="accordion"&gt;
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"&gt;B.A Honours Programmes&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne" class="accordion-body collapse"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="http://pearlacademy.com/wp/fashion-design/" class="accordion-toggle"&gt;Fashion Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion Styling &amp; Image Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Textile Design for Fashion And Interiors&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Communication Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Interior Architecture and Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Interior Product Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Jewellery Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion Media Communication&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion Business Management&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion Marketing and Retailing Management&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"&gt;Postgraduate Diploma Programmes&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="collapseTwo" class="accordion-body collapse"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Textile Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion Retail&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion Marketing&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Garment Manufacturing&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion Merchandising&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"&gt;Masters Programmes&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="collapseThree" class="accordion-body collapse"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;MA Design(Fashion and Textile)&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;MA Fashion Marketing&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" href="#collapseFour" data-toggle="collapse" data-parent="#accordion2"&gt;Professional Programmes&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="collapseFour" class="accordion-body collapse"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Luxury Brands&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" href="#collapseFive" data-toggle="collapse" data-parent="#accordion2"&gt;Diploma Programmes&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="collapseFive" class="accordion-body collapse"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Visual Merchandising &amp; Store Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Professional Photography with BTK Germany&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Digital Film Making&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Creative Graphic Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Styling for Interiors&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion &amp; Lifestyle Ecommerce&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Fashion Media Makeup&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;New Media Design&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Retail Operations&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Entrepreneurship and Business Management for Creative Industries&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Apparel Manufacturing&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Interior Styling&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" href="#collapseSix" data-toggle="collapse" data-parent="#accordion2"&gt;Certificate Programmes&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="collapseSix" class="accordion-body collapse"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Creative Fashion &amp; Technology in Women's Wear&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Apparel Marketing &amp; Merchandising&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;a href="#" class="accordion-toggle"&gt;Personal Styling &amp; Grooming&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS for accordion menu resides in <em>bootstrap.css</em>:</p>
  
  <pre class="lang-css prettyprint-override"><code>.accordion {
    margin-bottom: 20px;
  }
  .accordion-group {
    margin-bottom: 2px;
    /*border: 1px solid #e5e5e5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;*/
  }
  .accordion-heading {
    border-bottom: 0;
    background-color:#cccccc;
  }
  .accordion-heading .accordion-toggle {
    display: block;
    padding: 2px 4px;
    text-decoration:none;
    /*background-color:#e52b27;*/
  }
  .accordion-toggle {
    cursor: pointer;
    color:#5e5e5e;
    text-decoration:none;
  }
  .accordion-inner {
    padding: 2px 4px;
    border-top: 1px solid #e5e5e5;
    text-decoration:none;
  }
  </code></pre>
  
  <p>and I think this is the JS working on it (not sure):</p>
  
  <pre class="lang-js prettyprint-override"><code>/* COLLAPSE PUBLIC CLASS DEFINITION
  * ================================ */
  
   var Collapse = function (element, options) {
      this.$element = $(element)
      this.options = $.extend({}, $.fn.collapse.defaults, options)
  
      if (this.options.parent) {
        this.$parent = $(this.options.parent)
      }
  
      this.options.toggle &amp;&amp; this.toggle()
    }
  
    Collapse.prototype = {
  
      constructor: Collapse
  
    , dimension: function () {
        var hasWidth = this.$element.hasClass('width')
        return hasWidth ? 'width' : 'height'
      }
  
    , show: function () {
        var dimension
          , scroll
          , actives
          , hasData
  
        if (this.transitioning) return
  
        dimension = this.dimension()
        scroll = $.camelCase(['scroll', dimension].join('-'))
        actives = this.$parent &amp;&amp; this.$parent.find('&gt; .accordion-group &gt; .in')
  
        if (actives &amp;&amp; actives.length) {
          hasData = actives.data('collapse')
          if (hasData &amp;&amp; hasData.transitioning) return
          actives.collapse('hide')
          hasData || actives.data('collapse', null)
        }
  
        this.$element[dimension](0)
        this.transition('addClass', $.Event('show'), 'shown')
        $.support.transition &amp;&amp; this.$element[dimension](this.$element[0][scroll])
      }
  
    , hide: function () {
        var dimension
        if (this.transitioning) return
        dimension = this.dimension()
        this.reset(this.$element[dimension]())
        this.transition('removeClass', $.Event('hide'), 'hidden')
        this.$element[dimension](0)
      }
  
    , reset: function (size) {
        var dimension = this.dimension()
  
        this.$element
          .removeClass('collapse')
          [dimension](size || 'auto')
          [0].offsetWidth
  
        this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
  
        return this
      }
  
    , transition: function (method, startEvent, completeEvent) {
        var that = this
          , complete = function () {
              if (startEvent.type == 'show') that.reset()
              that.transitioning = 0
              that.$element.trigger(completeEvent)
            }
  
        this.$element.trigger(startEvent)
  
        if (startEvent.isDefaultPrevented()) return
  
        this.transitioning = 1
  
        this.$element[method]('in')
  
        $.support.transition &amp;&amp; this.$element.hasClass('collapse') ?
          this.$element.one($.support.transition.end, complete) :
          complete()
      }
  
    , toggle: function () {
        this[this.$element.hasClass('in') ? 'hide' : 'show']()
      }
  
    }
  </code></pre>