Toggling an icon is only working for one item - javascript

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.

Related

Jquery toggle one submenu only

I am having some minor issues while working with jquery. The code below is supposed to open the submenu list when the user clicks on the menu item. But when the user clicks on one of the menu items, it opens all other submenus as well:
$(document).ready(function(){
$(".mobile-main-menu-item-container").click(function(){
$(".mobile-main-menu-subitem-list-container").slideToggle();
});
});
I have to tell that I am not surprised that it is acting like that, because the same class is used for all menu items. I just want to ask what I have to change in the code so that only one submenu is opened. For sure, there is a better way to write the code instead of assigning different ID-s for each of them.
Thanks in advance for your help.
Inside the click function, use this to isolate the scope of your subitem class to only children (and grandchildren, etc.) of the item clicked.
$(document).ready(function(){
$(".mobile-main-menu-item-container").click(function(){
$(this).find(".mobile-main-menu-subitem-list-container").slideToggle();
});
});

how to disable bootstrap collapse

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.

JQuery Mobile: using "mark/unmark all" in a navbar for particular checkboxes within a collapsive div

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/

Change displayed price based on a button click

Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps

Creating mobile jQuery Toggle menu

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/

Categories

Resources