Issues in toggle sidebar menu with bootstrap

Question

I am working with shopify website, in that sidebar menu, need work like this link http://jsfiddle.net/wasimkazi/CGsJH/2/

I mean when click an one link, another link should be hide(if this link alreay opened).

This is bootstrap used:

!function ($) {

  "use strict"; // jshint ;_;


 /* 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']()
    }

  }


 /* COLLAPSIBLE PLUGIN DEFINITION
  * ============================== */

  $.fn.collapse = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('collapse')
        , options = typeof option == 'object' && option
      if (!data) $this.data('collapse', (data = new Collapse(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  $.fn.collapse.defaults = {
    toggle: true
  }

  $.fn.collapse.Constructor = Collapse


 /* COLLAPSIBLE DATA-API
  * ==================== */

  $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
    var $this = $(this), href
      , target = $this.attr('data-target')
        || e.preventDefault()
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
      , option = $(target).data('collapse') ? 'toggle' : $this.data()
    $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
    $(target).collapse(option)
  })

}(window.jQuery);

[Check this](http://getbootstrap.com/javascript/#collapse-example-accordion) — anpsmn, Dec 24 '14 at 09:28
You can scroll down on the link given, you will find the html snippet for accordion. Apply the classes as it is and bootstrap will do the rest — anpsmn, Dec 24 '14 at 09:36
sorry i am struggling to add corresponding classes in my code? @anpsmn — selva, Dec 24 '14 at 09:39
[Here is a fiddle of the accordion](http://jsfiddle.net/KyleMit/DSGxz/) — anpsmn, Dec 24 '14 at 09:42
@anpsmn: I tried, but it seems to stays same. may i know, how to move these classes in my above script? — selva, Dec 24 '14 at 10:52
why are you writing script for it? Include bootstrap.js and it will detect class and will act accordingly — anpsmn, Dec 24 '14 at 10:53
and you gave me that link is contained example with div but in my website using nav menu @anpsmn — selva, Dec 24 '14 at 11:04

anpsmn · Accepted Answer · 2014-12-24T11:16:43.960

0

Since you can't modify the HTML to make it an accordion, you can use the show event for collapse and hide the already shown section.

$(document).ready(function () {
    $('.collapse').on('show.bs.collapse', function () {
        $('.collapse.in').collapse('hide');
    })
   })

See fiddle

edited Dec 24 '14 at 11:16

answered Dec 24 '14 at 11:11

anpsmn

7,217
2
28
44

Do you have a custom js file? If yes then add the above code in that. – anpsmn Dec 24 '14 at 11:17
@npsmn: after i get 15 reputation., i will give +1.. Thanks. – selva Dec 24 '14 at 11:26
As you said that modals are all using click function, when we click the button, it will show that pop up right?.. i need like, when enter the site name in the address bar, it will show pop up center of the site.. – selva Dec 26 '14 at 05:05
Modals can be called directly by show method or you can trigger the button click. Go through the documentation. Also you will find many examples if you do a search. – anpsmn Dec 26 '14 at 05:10
may i know, how can i add this one: $('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() }) on my site https://crap-3.myshopify.com/.. can you help me? – selva Dec 26 '14 at 05:17
I am not getting what you want exactly. Shown is a callback that will execute once modal is shown. If you want to trigger a modal then use just this $('#myModal').modal('show'). – anpsmn Dec 26 '14 at 05:21
Also if you are stuck better to ask a question here in SO as that increases chances of getting answers quickly than waiting for me to comment :) – anpsmn Dec 26 '14 at 05:23
Here are few examples [Example1](http://stackoverflow.com/questions/12190119/bootstrap-modal-show-event), [Example2](http://stackoverflow.com/questions/20068962/modal-onload-in-page-bootstrap-3), [Example3](http://stackoverflow.com/questions/20877239/how-to-make-modal-dialog-open-at-page-load-in-bootstrap) – anpsmn Dec 26 '14 at 05:31
@selva I have said before if you have issues post it as a new question and people will answer quickly. More chances of getting answers quickly. Commenting won't help. – anpsmn Jan 02 '15 at 09:58
yes.. this is the link..http://stackoverflow.com/questions/27739684/how-to-set-cookie-for-display-notification-bar-at-only-once – Jan 02 '15 at 09:59

Issues in toggle sidebar menu with bootstrap

1 Answers1