I have a bootstrap accordion, and when I click one panel title to open it, instead of just staying open, it opens and then closes and opens again. The same thing is happening with the hamburger menu button at the top of the page (on small screen).
Here is the HTML. I don't really know javascript - I just used bootstrap's plugin. Here's bootstrap's javascript file:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<div class="panel-group my-3" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"><span class="question"> </span> What is TorahMates?</a></h5>
</div>
<div id="collapseOne1" class="panel-collapse collapse in">
<div class="panel-body">Typically, TorahMates study once a week for 30-60 minutes. There’s not usually any preparation necessary, especially if you’re using a text. Just be ready at your scheduled, agreed upon time to participate in an engaging discussion on the topic you choose! </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1"><span class="question"> </span> Who is TorahMates for?</a></h5>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">TorahMates is a great program for pretty much anyone Jewish, even if you don’t know anything about Judaism. We set up more knowledgeable volunteer mentors with “students” with less background. Usually, both partners find they gain tremendously from their study together. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1"><span class="question"> </span> What topics can I study?</a></h5>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body"> It’s up to you! You can study any topic that interests you, as long as it has something to do with Judaism, Torah, Jewish law or faith, Jewish History, Hebrew, prayers... you get the idea. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseFour1"><span class="question"> </span> How will you choose my partner?</a></h5>
</div>
<div id="collapseFour1" class="panel-collapse collapse">
<div class="panel-body">We have a large database of men and women who’ve signed up that we’ll use to find the perfect match for you. Some of the things we look for are common interests, ages, and cultural backgrounds. Often, these partnerships develop into far more than routine study sessions. Many of our TorahMates are now close friends too!</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseFive1"><span class="question"> </span> How do TorahMates go about studying?</a></h5>
</div>
<div id="collapseFive1" class="panel-collapse collapse">
<div class="panel-body">Most TorahMates study over the phone but FaceTime or the like is also a great option. Where possible, some TorahMates even study in person. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseSix1"><span class="question"> </span> Will you supply the books/study text or do I need to get my own?</a></h5>
</div>
<div id="collapseSix1" class="panel-collapse collapse">
<div class="panel-body">Once you’ve decided what topic you want to learn, your TorahMates coordinator will suggest various titles and authors to support that topic. Not everyone learns from a text, but many do. We’ll supply each of you with one free book per year of learning.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseEight1"><span class="question"> </span> What happens if my partnership is not working out?</a></h5>
</div>
<div id="collapseEight1" class="panel-collapse collapse">
<div class="panel-body">Your coordinator will work with both partners to smooth out any issues that may arise. If nothing can be worked out or if it’s just not a match, we can find new partners for each TorahMate.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseNine1"><span class="question"> </span> What is the mileage program? How do I log in to it?</a></h5>
</div>
<div id="collapseNine1" class="panel-collapse collapse">
<div class="panel-body">The mileage program is a nice perk through which TorahMates can earn great prizes by logging in their sessions by date and number of minutes learned. You can log in online, by phone or by text. Your TorahMates coordinator can show you how. </div>
</div>
</div>
</div>
Here is the link to the page:
http://torahmates.org/junior/index.php#faq
Any ideas?
Turns out I had an include file with duplicate scripts running on the page, which was causing the issue.
Related
This is my HTML
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Do I need to print my ticket?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>No, showing your e-ticket on your phone is fine. However, printing your ticket can sometimes make the process of entering an event easier/faster. </p>
</div>
</div>
</div>
need to save it into the database
when I save it CKEditor automatically convert <div> to <p>
In order to retrieve data from this editor called CkEditor you have to use method CKEDITOR.editor.getData, which is an instance of the editor.
<script>
var data = CKEDITOR.instances.editor1.getData();
//Then write your code here to save it
</script>
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?
I am using the bootstrap collapse class. My HTML Code:-
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<input type="checkbox" id="select" data-toggle="collapse" data-target="#collapse1"> Please Select
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
</div>
<div class="panel-footer">
</div>
</div>
</div>
</div>
I want to access this in Javascript. What I want is when I click the checkbox or when the panel collapsed I want to do something during that time. How to access the collapse using javascript?
I am trying this code:-
$('.collapse').on('hide.bs.collapse', function () {
//my funcionality here
});
But this is not working. Can anyone tell me what is wrong in this code.
According to bootstrap documentation, your jquery selector is wrong. You should pass div id which is going to be a collapse.
$('#collapse1').on('hide.bs.collapse', function () {
//my funcionality here
});
I'm implementing an spoiler box bbcode in phpbb which uses an bootstrap-based style.
But i'm having problems since phpbb dont give any unique identifier for each bbcode processed, so i cant use an id for the collapsible div due to inevitable duplication of the code every time a member uses the bbcode in a text.
The base html is like this:
<div class="panel-group">
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">SPOILER!</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">{TEXT}</div>
</div>
</div>
So how i can make the panel body collapsable without an id?
Thanks.
Well, the PT stackoverflowers were fast.
Here the translated answer:
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" onclick="$(this).parents().next('div.panel-collapse.collapse').collapse('toggle');">SPOILER!</a>
</h4>
</div>
<div class="panel-collapse collapse">
<div class="panel-body">{SPOILER}</div>
</div>
</div>
Isnt the best form, but if you cant get any ID, its an alternative.
Here the jsfiddle
I have a problem with my code. I have a list of many Bootstrap Panels collapsed. Each panel has an iFrame with a Youtube Video link this:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="linkVideo collapsed" href="#10083" data-parent="#accordion" data-toggle="collapse">
<?php echo $title;?>
</a>
</h4>
</div>
<div id="10083" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<div class="videoWrapper" style="display: none;">
<iframe src="//www.youtube.com/embed/<?php echo $faq['video']; ?>" frameborder="0" allowfullscreen></iframe>
</div>
<div class="row"> </div>
</div>
</div>
</div>
The problem is that when I load my page and I have about 20/25 panels with 20/25 Video, I saw that it download 15/20 MB and is too slow. Do you know how to solve it?
Thanks ;)
UPDATE
I would dynamically initialise the iframes when the user expands them to include the content. Can you help me to do this?