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>
Related
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.
Ok, I have a pretty complicated html setup here, and in my function I need to remove all the ps (NOT just all divs, ps specifically) that are NOT within these 2 subclasses : .panel-heading and .panel-body
Originally I got all ps in the following:
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingEight">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseNine2" aria-expanded="false" aria-controls="collapseNine2">
<i class="fa fa-plus-square-o"></i>
<span style="margin-left: 12px; display: inline-block;"></span>AirWatch and Workspace ONE
</a>
</h4>
</div>
<div id="collapseNine2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingEight">
<div class="panel-body">
with this:
$(labArr[i].selector).find(".panel-default").find("p").remove()
And this works except its deleting literally all the ps, which I can't have. I know I need to use the not selector so Ive tried:
$(labArr[i].selector).find(".panel-default").find("div:not(.panel-body, .panel-heading)").remove();
and
$(labArr[i].selector).find(".panel-default:not(.panel-body, .panel-heading)").find("p").remove();
which did not work. I don't know why.
How can I remove ALL ps in panel-default except the ones in those 2 classes?
As always with selectors, there's lots of different ways to achieve the same thing, but try this:
$(labArr[i].selector).find(".panel-default p").not(function() {
return $(this).closest('.panel-body, .panel-heading').length;
}).remove();
That inspects each paragraph matched, then discards any that live under an element with the two prohibited classes.
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 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.
basically want to toggle the visibility of a separate element by linking up with the toggling of a bootstrap-collapsed heading. in the case below, the clicking of "#producer" will expand/collapse "#collapseOne". i want that same function to make ".cv" appear and disappear too. i don't want other headings to affected, though, so it should be specific to just clicking "#producer".
markup:
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" id="producer">Producer Reel <em>For Hire!</em>
</a>
<a class="cv" href="#">
<i class="icon-file-text-alt"></i>my CV
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">...</div>
any help would be appreciated!
$('.accordion-toggle').click(function(){
$(this).next('.cv').collapse('toggle');
});