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
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 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.
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 am pretty frustrate that the Bootstrap 3 accordion control doesn't seem to have a built-n class toggle for open/close on the heading of the accordion.
I need to have an accordion with one css class on the header when its child is open, and another for it closed. I'm close with the following code, but this doesn't cover the situation when a user closes and already opened pane without choosing a different pane -- it only works right if you keep choosing different panes.
The 3 things I need the headers to correctly show state:
when a pane is set to be opened by default (add "in" class to html of that pane)
when manually opened or closed, show right class
when closed by clicking a different pane open
I so far have
$(function() {
$('h4.panel-title').each(function() {
// check all headers to see if they have open children
var isOpen = $(this).closest('.panel').find('.panel-collapse').hasClass('in');
// and, if yes, set the class to "open"
if (isOpen) {
$(this).addClass('open');
}
});
$('h4.panel-title').on('click', function(event) {
// remove "open" class from all headers in this group
$(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
// then set the one clicked on to open
$(this).addClass('open');
});
With this html:
<div class="panel-group accordion-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
text...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
text...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
text...
</div>
</div>
</div>
</div>
It didn't fully survive being pasted into a Fiddle, but here is is: http://jsfiddle.net/smlombardi/kW33s/
Try this,
$(function() {
$('h4.panel-title').on('click', function(event) {
// remove "open" class from all headers in this group
$(this).closest('.accordion-group').find('h4.panel-title').removeClass('open');
// remove "in" class from all collapse panel
$(this).closest('.accordion-group').find('.collapse').removeClass("in");
// then set the one clicked on to open
$(this).addClass('open');
$(this).parent().next(".collapse").addClass("in");
});
});
JSFIDDLE
I found this
Bootstrap 3 accordion styling on open/closed
I realized its better to hook into the BS3 accordion events than do the click event, since the issue I had was that the pane had the IN class when clicked even if the click was going to close it.