bootstrap accordion menu
My problem is that i used the bootstrap accordion menu for my wordpress site.
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.
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.
Here is my code for accordion menu:
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">B.A Honours Programmes</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<a href="http://pearlacademy.com/wp/fashion-design/" class="accordion-toggle">Fashion Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion Styling & Image Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Textile Design for Fashion And Interiors</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Communication Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Interior Architecture and Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Interior Product Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Jewellery Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion Media Communication</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion Business Management</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion Marketing and Retailing Management</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">Postgraduate Diploma Programmes</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Textile Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion Retail</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion Marketing</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Garment Manufacturing</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion Merchandising</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">Masters Programmes</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<a href="#" class="accordion-toggle">MA Design(Fashion and Textile)</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">MA Fashion Marketing</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">Professional Programmes</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Luxury Brands</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseFive" data-toggle="collapse" data-parent="#accordion2">Diploma Programmes</a>
</div>
<div id="collapseFive" class="accordion-body collapse">
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Visual Merchandising & Store Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Professional Photography with BTK Germany</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Digital Film Making</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Creative Graphic Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Styling for Interiors</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion & Lifestyle Ecommerce</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Fashion Media Makeup</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">New Media Design</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Retail Operations</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Entrepreneurship and Business Management for Creative Industries</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Apparel Manufacturing</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Interior Styling</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseSix" data-toggle="collapse" data-parent="#accordion2">Certificate Programmes</a>
</div>
<div id="collapseSix" class="accordion-body collapse">
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Creative Fashion & Technology in Women's Wear</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Apparel Marketing & Merchandising</a>
</div>
<div class="accordion-inner">
<a href="#" class="accordion-toggle">Personal Styling & Grooming</a>
</div>
</div>
</div>
</div>
Here is the CSS for accordion menu resides in bootstrap.css:
.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;
}
and I think this is the JS working on it (not sure):
/* 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 && 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 && this.$parent.find('> .accordion-group > .in')
if (actives && actives.length) {
hasData = actives.data('collapse')
if (hasData && hasData.transitioning) return
actives.collapse('hide')
hasData || actives.data('collapse', null)
}
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && 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 && this.$element.hasClass('collapse') ?
this.$element.one($.support.transition.end, complete) :
complete()
}
, toggle: function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
}
Answer
Here's what you should do. Throw away the code you've written, because you're misusing accordions. To make a navigation with dropdowns, here's an example.
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse subnav-collapse">
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="nav-header">
Nav header
</li>
<li>
<a href="#">Separated link</a>
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
EDIT:
To open an accordion on page load, this should work:
Assign the accordion you want to be opened class="open-accordion" and add to your javascript file or within <script></script> the following snippet:
$('.open-accordion').on('hidden', function () {
$('.open-accordion').collapse('show')
})
I haven't tested it, but should work according to bootstrap documentation.