I have some FAQs in an accordion. Question 1 is active and open with the answer visible. Question 2, when I click on that, Question 2 closes. I don't want that. Ideally, and this is sort of off-top, I'd like Question 1 not to default to being opened.
I tried:
$(document).on('click', '[data-toggle=collapse] .fa', function(e) {
e.stopPropagation();
});
But my accordion still collapses when another is clicked on.
From your question, I can kind of guess your problem. Check to see if your HTML code has a data-parent="xxxx" attribute where xxxx is the id of the container. If you find it, remove that attribute. This is the thing that makes other panels collapse.
To add accordion-like group management to a collapsible control, add
the data attribute data-parent="#selector". Refer to the demo to see
this in action.
See: https://getbootstrap.com/javascript/#via-data-attributes-3
The easy way to accomplish this would be to simply remove the div.panel-group container that wraps the accordion group. You could then also remove the "data-parent" data attribute from all the collapse targets, just for cleaning up the code.
And your second question -- to make a panel default to open, you just give it the classes "panel-collapse collapse in" <-- the 'in' makes the panel begin opened on the page.
Related
I have been reading many posts about toggling an icon and I got some code to work but it only works for one item and I have 23 of them.
Basically, it's an accordion of FAQ's and when you click on it the answer shows but I want a plus and minus sign to show and toggle depending on if it's collapsed or not.
I found this code and updated with my site and it works but only for the first FAQ.
$("#switch").click(function(event) {
$(this).find('i').toggleClass('fa-plus-square').toggleClass('fa-minus-square');
});
What do I need to do to make it so they all change?
I thank you in advance for your time.
Only one item on the page can have the id switch. Change this to a class and select using $('.switch') to apply the event to each item.
I have a bunch of HTML fields logically separated as such: half the fields reside in: div id="general" and the other half reside in: div id="advanced"
What I'm trying to implement (and failing) is the following:
The fields in the general div to be shown (by default). A button with the caption "Advanced" shown. And the fields in the advanced div to be hidden.
When this button is clicked, the following should occur:
General section collapses hiding all it's fields
Advanced section expands showing all it's fields
Button caption is changed to "General".
Subsequent clicks toggles the above.
E.g. upon the next click, the advanced section now is hidden, general section now is shown, and button caption changes to "Advanced"
Notes: This seems trivial but being new to web front-end, I can't get this easily. If my div section is incorrect, then scrap it. I suspect I'm on the right track, and just need some jQuery code to collapse and expand divs.
Below are my attempts:
I used the Bootstrap collapse plugin with accordian markup, but this isn't what I want. It comes close though, but each section has a heading/button. I'd like one heading/button to toggle each section in an opposite manner.
I used the Bootstrap collapse plugin without the accordian markup, but same result as attempt 1 - two button again.
I tried using jQuery to do this dynamically, but can't get the logic (or syntax) correct.
I'm using Bootstrap, but happy to go with jQuery (or JavaScript) solution if it can't be done solely in Bootstrap with the collapse plugin.
You can do it using jquery by toggling a class on element which decides which fields to be shown.
for e.g. Take an outer div, and put general and advanced div inside outer div and show only the fields based on outer div class like advanced using css. And bind a button to toggle the class on the outer div.
Checkout JSFiddle here : http://jsfiddle.net/eqhw2mxx/2/
Check the JSFiddle :- JSFiddle
$("#advanced").addClass('hide');
$(".button").click(function(){
$("#advanced").toggleClass('hide');
$("#general").toggleClass('hide');
if($(this).attr("value") == "Advanced"){
$(this).attr("value","General");
}
else if($(this).attr("value") == "General"){
$(this).attr("value","Advanced");
}
});
I'm new to js/jquery mobile, and I've been trying to create a complex example to improve my skills.
I have a JQM Accordion, grouping listviews with one checkbox per line on each "collapsible" div. What I want to do is use a dynamic Navbar to "Mark/Unmark" all checkboxes from the active listview. Example:
User chooses a "group" (accordion "collapsible" div)
User checks any checkbox in the listview
The page displays a navbar with two options: "Mark All" / "Unmark All" (with obvious behavior). This must stay opened until there are any checkboxes marked in this group. If the user chooses to "Unmark" all of them, the navbar should be hidden.
If the user chooses another "group", the page must unchecked all checkboxes from the past group, and hide the navbar.
I've been able to create the whole thing after a lot of research, and this is what I came up with: http://jsfiddle.net/mauriciorcruz/2zgt8/ .
My issue is that the
$('#navbar-footer').show();
$('#navbar-footer').hide();
stops working as expected after some checkbox clicks in different groups.
I've searched a lot for the answer, but it seems I'm not having enough skills to even understand the issue. My guess is that it's something related to how I'm implementing the handlers, as my implementation fully works while debugging.
Any help is appreciated.
Thank you!
the problem have something to do with the tapToggle of jquery-mobile you can fix it adding the data-tap-toggle="false" on the footer like this
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="index-footer">
or in the $(document).ready like this
$("[data-role=footer]").fixedtoolbar({ tapToggle: false });
the footer won't toggle on screen tap but it will work on your functions
http://jsfiddle.net/2zgt8/2/
if you want to keep the tapToggle you need to add e.stopPropagation() on your click handlers like this
$('#index-footer').on('click', '#mark-all', function(e) {
e.stopPropagation();
//...
});
http://jsfiddle.net/2zgt8/3/
I'm trying to make an jQuery toggle menu for a mobile website.
Since it is a wordpress site I would like to make this as dynamic as possible. I want to create a custom WordPress menu.
Now the tricky part comes.
I want it to check if the menu item has children (or child ul) and then toggle between:
<div class="plus">+</div> and <div class="min">-</div>.
When a item has no childeren nothing should happen at all.
So far I've managed to do this, please see my experiment at http://jsfiddle.net/jfvandekamp/9Dvrr/2/
You can use the jQuery function $.contains() to Check to see if a DOM element is within another DOM element.
http://api.jquery.com/jQuery.contains/
So in your example, you'd check to see if the menu item that was clicked contains another UL element
$jQuery.contains($(this), '<ul>');
I would use $.has() to filter out the collapsible items.
I've updated your jsFiddle: http://jsfiddle.net/9Dvrr/5/
I am working on a new site TheDigitalScale and I am using jQuery to create a feature list that expands a div when clicked and closes the div with another click.
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function()
{
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
</script>
<div class="msg_list">
<p class="msg_head">They Forgot The Buttons</p>
<div class="msg_body"><p>
Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken.
</p></div>
</div>
It works fine and all but, I also have a product review link that uses the JavaScript do_PostBack function to expand a review panel.
Review and Rate this item
When the review link is clicked, it causes all of the jQuery divs to expand.
When I set enablepartialrendering to false and it "fixes" the problem but when the review link is clicked it takes the user to the top of the page and expands the review panel rather than just expanding the review panel and keeping the user in the right spot.
I hope I explained this well enough; I am very new to jQuery, JavaScript and AJAX.
Regards,
Shala
EDIT:
I suppose I didn't really ask a question so...
What can I change to make the review link expand the review panel and keep the user in the area without also expanding every one of the jQuery divs?
Here is a link to a product page: MBSC-55
It looks like you have nested updatepanels. Try setting the UpdateMode property of the parent panel to Conditional to prevent the child updatepanel from triggering the parent updatepanel.
Okay, I think I see what's happening. When your page loads you execute this code:
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
Now, when .net does the postback it is re-creating those .msg_body and .msg_head elements. The best solution would be to get .net to not replace those (unless you need them to).
If you need those to re-draw, you can do 2 things. First, set .msg_body to be hidden in your css, that way they are hidden by default. Then to handle the click issue, replace your click code with this:
$(".msg_head").live("click", function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
This will cause the click handler to still work for newly added .msg_head items.