Develop Reference

Bootstrap Accordion redirects page in Angularjs

I did my research on this and noted that there are 2 topics similar to this.
Bootstrap's tabs with data-toggle cause reload in angularjs
and
Using bootstrap collapse with angularjs
Both mentioned to replace href tag with data-target
So I did an attempt
BEFORE
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" **href**="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
This is a simple accordion inner content...
</div>
</div>
</div>
</div>
AFTER
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" **data-target**="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
This is a simple accordion inner content...
</div>
</div>
</div>
</div>
And now while there is no more redirect, it doesn't expand the accordion.
I understand that there is an AngularJS Accordion I can use, but I have a UI developer that does not know AngularJS and will give us codes in the above format, therefore, I want to bridge that gap whereby he gives us a piece of HTML that doesn't work as expected.
I noted that one of the comment mentioned.
The above solution (also exactly the same in Bootstrap documentation) only works when not using Angular, at least for certain versions. I am assuming this is why the Angular folks created this library Angular UI Bootstrap as a workaround to these sorts of conflicts. Haven't investigated it fully to understand exactly the conflict, but this article sheds some light on possibly related conflicts due to jQuery. – michaelok Jan 8 '16 at 17:28
What does when not using Angular means exactly in this case?

Bootstrap Collapsible Panel not collapsing

I am trying to make a collapsible panel, however when pressed, nothing happens.
Here are the CSS files I am using:
// Loads all of the CSS styling files needed for view pages to display correctly.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/jasny-bootstrap.css",
"~/Content/PagedList.css",
"~/Content/bootstrap-datetimepicker.css",
"~/Content/Site.css"));
Here are all of the JS files I am using:
// Loads all of the JavaScript files that are needed for view pages to function
// correctly.
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/moment.js",
"~/Scripts/moment-with-locales.js",
"~/Scripts/jquery-2.1.4.min.js",
"~/Scripts/bootstrap.js",
"~/Scripts/jasny-bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/bootstrap-datetimepicker.js",
"~/Scripts/jquery-ui-i18n.js"));
These are then rendered using:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/bootstrap")
Now for my actual code where the collapsable panel is:
#using (Html.BeginForm("Index", "Item", FormMethod.Get, new { #class = "form-inline" }))
{
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse">Collapsible Group</a>
</h4>
</div>
<div id="collapse" class="panel-collapse collapse">
<div class="panel-body">
Everything goes here...
</div>
</div>
</div>
}
Any help would be greatly appreciated.

Firstly read the link: http://getbootstrap.com/javascript/#collapse
but the following will help:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseID" aria-expanded="false" aria-controls="collapseID">Collapsible Group</a>
</h4>
</div>
<div id="collapseID" class="panel-collapse collapse">
<div class="panel-body">
Everything goes here...
</div>
</div>
</div>

You haven't mentioned which version of Bootstrap you're using. By default Visual Studio installs Bootstrap V 2.x.x which i have experienced in many cases does not support accordion/collapse, V 3.x.x does, try updating Nuget package to latest available and you shall be good to go.
Hope that helps.

try use this template
Bootstrap Accordion example
using this tags data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"

Hiding button after collapse is toggled in bootstrap

Given the following code from the bootstrap website for the collapse functionality:
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
What I would like to do is hide the link, that invokes the collapse functionality once its open, does anyone know of a way I can do this without adding additional Js?

I used this to hide the button after it was clicked:
HTML (just added a class "hide-me"):
<button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>
CSS:
.hide-me[aria-expanded="true"] {display: none;}

This is what I was really looking for', without any CSS or JavaScript of my own, simply leveraging Bootstrap:
<a class="btn btn-primary hook in" data-toggle="collapse" href=".hook" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse hook">
<div class="well">
...
</div>
</div>
Heres the fiddle:
http://jsfiddle.net/hptrpaxh/1/

Add this:
$('.btn').toggle();
I recommend you add an additional class to this button or give it an id to distinguish it from other buttons.

Sorry didn't see you were trying to do it without extra js.
Here's an easy CSS trick. You can obviously modify it as well
give the button a class like hidden-button
Then use this CSS
.hidden-button {
position:relative;
z-index:0;
}
.well {
position:relative;
margin-top:-33px;
z-index:10000;
}
Here's a fiddle http://jsfiddle.net/cp5Lvtdo/4/

This can be done in Bootstrap 5 (and presumably 4) using the native Accordion functionality. Place the button and the content in separate accordion item elements, and set the parent on the collapsible content per the docs.
Notice that I've hidden the accordion item borders with b-0.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="accordion m-4" id="accordionArea">
<div class="accordion-item border-0">
<div class="accordion-collapse collapse show">
<button class="btn btn-primary" role="button"
data-bs-toggle="collapse" data-bs-target="#content"
aria-expanded="false" aria-controls="content">Toggle button & content
</button>
</div>
</div>
<div class="accordion-item border-0">
<div id="content" class="accordion-collapse collapse"
data-bs-parent="#accordionArea">
<div>Some content.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

If you would like to be able to collapse the content and show the link again without reloading the page you can wrap the whole content section (your <div>) in the <a> element.
Place some link content before the actual collapsible content and give it a class or id. Then add a custom CSS class to the <a> tag as explained in the previous answer but add a child selector like this:
.toggle-hide[aria-expanded="true"] > /* your link content class or id here */ {
display: none;
}
This will make the link less visible but you'll be able to click the content itself to collapse it and show back just the link.

Bootstrap accordion elements won't open

I have a number of dynamically generated bootstrap accordions nested in tabs. It's all bootstrap. I have one accordion panel defaulting to open but once i click anywhere it closes and no others will open.
I'm using the code right out off the example but filling in dynamica elements. I've checked all the other possibilities on here -making sure my data-target and/or href match the id of the accordion-body and it's all good. Someone suggested using data-target instead of just href, but that didn't help. Each accordion has a unique name and the calls to data-parent are correct. Here's the source code that generated what I copied over to jsfiddle:
<div class="tab-pane active" id="institutional">
<div class="accordion" id="accordion2">
{foreach name=loop from=$institutional item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#{$film->url_key|escape}" href="#{$film->url_key|escape}">
{$film->title()|escape} -
{$film->title_suffix()|escape}
</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">
<div class="accordion-inner">
http://jsfiddle.net/dylanglockler/7qy8g/1/
----------UPDATE ------- figured it out but can't answer my own question because I don't 'have enough experience points' - didn't realize this is a game.
I figured it out.. the id of my accordion content and the related data-target and href that pointed to it, were based off of film titles which are unique, but repeated within each accordion, albeit on separate tabs. Of course this made for non-unique ids.
My fix is below, I added an _n (ie, _1) after the generated id for each of the three accordions:
<div class="accordion" id="accordion1">
{foreach name=loop from=$home item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" data-target="#{$film->url_key|escape}_1" href="#{$film->url_key|escape}_1">{$film->title()|escape} - {$film->title_suffix()|escape}</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}_1" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">

The problem seems to be having the accordion inside the tab content.
When it's removed from the tab-pane it works fine: http://jsfiddle.net/skelly/7qy8g/2/

Can't get the javascript from twitter bootstrap accordian to work

I am trying to follow the instructions on this site: http://sathomas.me/acc-wizard/
I have followed the instructions, and even copied and pasted the exact code. Can you tell me what's going wrong? I have verified that all the code is located in the proper directory. Here is an image of what's displaying on my site: http://i.imgur.com/BSmrFZQ.png
Here's my code, the CSS is added in the header and is not in the code below:
<div id="body">
<div class="row-fluid breadcrumbs margin-bottom-30">
<div class="container">
<h1 class="pull-left">Book Now!</h1>
</div><!--/container-->
</div><!--/breadcrumbs-->
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="row-fluid acc-wizard">
<div class="span3" style="padding-left: 2em;">
<p style="margin-bottom: 2em;">
Follow the steps below to add an accordion wizard to your web page.
</p>
<ol class="acc-wizard-sidebar">
<li class="acc-wizard-todo">Prerequisites</li>
<li class="acc-wizard-todo">Add Wizard</li>
<li class="acc-wizard-todo">Adjust HTML</li>
<li class="acc-wizard-todo">Release</li>
</ol>
</div>
<div class="span9">
<div class="accordion" id="accordion-demo">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites">
Install Bootstrap and jQuery
</a>
</div>
<div id="prerequisites" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-prerequisites">
<p>
The accordion wizard depends on two other open source packages:
<ul>
<li>The Bootstrap framework, available here.
<li>The jQuery javascript library, available here.
</ul>
Note that Bootstrap itself depends on jQuery for its interactive
components, so if you're using Bootstrap you probably already have
jQuery as well.
</p>
<p>
You'll include the CSS styles for Bootstrap in the
<code><head></code> of your HTML file, for example:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet"><!--
--></pre>
<p>
and you'll include jQuery and Bootstrap javascript files at the
end of your <code><body></code> section, for example:
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script><!--
--></pre>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#prerequisites -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard">
Add Accordion Wizard
</a>
</div>
<div id="addwizard" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-addwizard">
<p>
If you haven't already found it, the source code for the
accordion wizard is available on github
here.
There are two main folders, <code>/src</code> and
<code>/release</code>.
</p>
<p>
There are two different ways to add the accordion wizard to
your pages. The simplest approach is just to add the CSS and
javascript files from the <code>/release</code> folder
directly in your HTML without modifying them:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- --><link href="css/acc-wizard.min.css" rel="stylesheet"><!--
--></pre>
<p>
and
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script>
<!-- --><script src="js/acc-wizard.min.js"></script><!--
--></pre>
<p>
The release styles for the accordion wizard are based on
Bootstrap's default styles. If you've tweaked the Bootstrap
styles (e.g. by changing the link color), you'll want to
make corresponding tweaks to <code>acc-wizard.min.css</code>.
</p>
<p>
Alternatively, if you're building custom CSS and javascript,
then you might want to start with the files in the <code>/src</code>
folder and adapt them to your source code. The <code>/src</code>
folder contains a LESS file and uncompressed (and commented)
javascript. Note that the <code>acc-wizard.less</code> file
depends on variables defined in Bootstrap's <code>variables.less</code>
file.
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#addwizard -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml">
Adjust Your HTML Markup
</a>
</div>
<div id="adjusthtml" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-adjusthtml">
<p>
Now you can modify your HTML markup to activate the accordion
wizard. There are two parts to the markup—the collapsible
accordion itself and the task list. I prefer putting both in
the same <code>.row</code> with the task list taking up a
<code>.span3</code> and the accordion panels in a <code>.span9</code>,
but that's not a requirement.
</p>
<p>
The accordion panel can be exactly as documented in the
Bootstrap example,
but I think there's a problem with the Bootstrap implementation.
Specifically, the Bootstrap example only adds the class
<code>.in</code> to one of the accordion panels. That class
marks the panel as visible by default. The problem with only
having one panel visible by default is that users without
javascript will <strong>never</strong> be able to see the other
panels. Sure, that's a minority of users, but why make your
pages unworkable even for a small minority. Instead, I suggest
adding <code>.in</code> to all your <code>.collapse</code>
elements and have javascript code select only one to make
visible when it runs. The accordion wizard javascript will handle
that for you if you choose to use that approach.
</p>
<p>
The sidebar task list is nothing but a standard HTML ordered
list. The only required additions are adding the
<code>.acc-wizard-sidebar</code> class to the <code><ol></code>
element and <code>.acc-wizard-todo</code> to the individual list
items. If you want to indicate that some steps are already
complete, you can instead add the <code>.acc-wizard-completed</code>
class to the corresponding <code><li></code> elements.
</p>
<pre><!--
--><ol class="acc-wizard-sidebar">
<!-- --> <li class="acc-wizard-todo"><a href="#prerequisites">Install Bootstrap and jQuery</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#addwizard">Add Accordion Wizard</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#adjusthtml">Adjust Your HTML Markup</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#viewpage">Test Your Page</a></li>
<!-- --></ol><!--
--></pre>
<p>
Finally, you'll want to active the wizard in your javascript.
That's nothing more than simply calling the plugin on an
appropriate selection.
</p>
<pre><!--
--><script>
<!-- --> $(window).load(function() {
<!-- --> $(".acc-wizard").accwizard();
<!-- --> });
<!-- --></script><!--
--></pre>
<p>
The default options are probably fine for most uses, but
there are many customizations you can use when you activate
the wizard. Check out the documentation on
github
for the details.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#adjusthtml -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#viewpage">
Test Your Page
</a>
</div>
<div id="viewpage" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="viewpage">
<p>
Naturally, the last thing you'll want to do is test your
page with the accordion wizard. Once you've confirmed that
it's working as expected, release it on the world. Your
users will definitely appreciate the feedback and guidance
it gives to multi-step and complex tasks on your web site.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#viewpage -->
</div> <!-- /.accordion-group -->
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/acc-wizard.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
function onNext(parent, panel) {
hash = "#" + panel.id;
$(".acc-wizard-sidebar",$(parent))
.children("li")
.children("a[href='" + hash + "']")
.parent("li")
.removeClass("acc-wizard-todo")
.addClass("acc-wizard-completed");
}
$(window).load(function() {
$(".acc-wizard").accwizard({onNext: onNext});
})
</script>

Are you not forgot about this?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>

Order is important! You add these libraries but in wrong order. Here is correct:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/acc-wizard.min.js"></script>
And fix that errors first!:
GET http://shield.sitelock.com/shield/maidsinmemphis.com 403 (Forbidden) index.php:363
GET http://www.maidsinmemphis.com/assets/elasticslides/css/style.css 404 (Not Found) index.php:25
GET http://www.maidsinmemphis.com/assets/css/acc-wizard.min.css 404 (Not Found) index.php:31
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.easing.1.3.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.eislideshow.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/js/acc-wizard.min.js 404 (Not Found) index.php:387
Uncaught TypeError: Object [object Object] has no method 'accwizard'