I'm trying to create a collection of panels that can be expanded or collapsed individually, or with a parent button to expand/collapse all child panels. I do not want an accordion, where opening one panel closes all others. I've been successful in getting multiple panels to expand/collapse independent of their neighbors, but not as a group.
There are lots of examples of how to do this, but they all require jQuery. I've discovered several jQuery methods don't exist or don't work in Boilerplate, like this one:
$(this).closest('.collapse-group').find('.collapse').collapse('hide');
...which results in an error in the browser console:
TypeError: Object doesn't support property or method 'collapse'
I have been unable to get this example to work on the dashboard page: [https://codepen.io/martinkrulltott/pen/mejmmj]) probably due to the jQuery code not being invoked.
I've spent a couple of whole days trying to enable what should be a simple task, without success. Can you offer any assistance?
7 Answer(s)
-
0
.collapse is a Bootstrap method. Check if Bootstrap is loaded:
console.log($().collapse); -
0
I do have a collapsible panel working with 'data-toggle="collapse"' in html, so I think the means Bootstrap is loaded - yes? When I place
console.log($().collapse);in 'ngOnInit()' in my component, the browser console message is
undefined... which would suggest Bootstrap is not loaded?
-
0
That's odd. It works when I place it in ngOnInit() in both the host and tenant dashboard components.
- Which version of ASP.NET Zero are you on?
- What happens when you run it in your browser's developer console?
-
0
ASP.NET Zero version 5.3.0
Browser:
> console.log($().collapse); function _jQueryInterface(config) { return this.each(function () { var $this = $$$1(this); var data = $this.data(DATA_KEY); var _config = _extends({}, Default, $this.data(), typeof config === 'object' && config); if (!data && _config.toggle && /show|hide/.test(config)) { _config.toggle = false; } if (!data) { data = new Collapse(this, _config); $this.data(DATA_KEY, data); } if (typeof config === 'string') { if (typeof data[config] === 'undefined') { throw new TypeError("No method named \"" + config + "\""); } data[config](); } }); } eval code (33435) (1,1) < undefined >... and following the eval code link:
Failed to open eval code (33435) -
0
@TimMackey I think you have solved this problem by using ngx-bootstrap's collapse feature, right ?
-
0
Yes, I have been able to solve the problem. Thanks for following up! :D
-
0
thanks for the feedback ;)
