Develop Reference

Button on accordion (bootstrap)

I'm creating several accordions headers and bodies from a vuejs data object.
The header is a button that triggers the body content and contains several datas and 2 nested buttons.
1st one to delete current header and its body from the DOM
2nd one to edit the body.
Second button is supposed to open a modal but for some reason when i click on this modal button, it triggers the accordion's collapse and modal at the same time creating a visual bug.
How can I trigger a nested button without triggering the main button?

I would have to see your code to tell your for sure, but it sounds like you can just use a different on click event for the second button?

jQuery on click event not working on a button but works well on other links

So I've got a cart drawer on my e-commerce site that I want to get to open on click whenever the 'Add To Cart' button is clicked.

I can't comment yet, however, i think your button may not be firing because of duplicate id fields.id's are considered unique to one element while class's can be applied across many elements. Your javascript ('#AddToCart') will only run on the first element with that specific id. Check your code just to be sure.

Open html form below home page Onclick

I am using on click method onclick example am using
I am using two step Onclick method when I click 2nd Onclick a HTML form should open in same page how do I do that
since I am using many sub categories Like ,mobile, computer, etc,...
so I have many sub form
when user click sub form the linked form should open in same page here is the working example Onclick method
what I need is how to open html form file below

You could do something like this: http://jsfiddle.net/8ugjj2yo/2/
In short: bind click events on each 1:st menu item, and then on 2:nd menu item.
Each click handler should close "all other" of the same kind when you click it, then open whatever you clicked (if you want more forms to be displayed at the same time, remove all rows that call
.hide();
The css supplied in the fiddle is just temporary, change it to whatever, the only thing you can't change is the
display:none;
thats there already. (You could also hide them on page load with jquery ofc..)

Onclick not working in panel after page change

I'm creating a small webapp using jquery mobile and php. I have an issue where I have a menu in a panel which i need to run an onclick event from. This works fine when the page has been re-loaded either using data-ajax='false' or running a page refresh. However when I try to use the event after a page change it just doesn't respond at all.
Here is my onclick code
$('#searchOptionMap').click(function()
{
window.alert("map clicked ");
});
and you can see the js fiddle here http://jsfiddle.net/jbcvnz0p/
If you go to page 1 - panel click - map click the alert appears
If you then navigate to page 2 - panel click - map click the alert doesn't appear
If you stay on page 2 and click the map collapsible - alert appears
You can see that the same onclick event works for a collapsible set outside the panel, just not within it. Is there any fix for this other than using data-ajax='false' or running a page refresh?

You have two divs with the same id, when you bind something with jQuery using an id, it only does the first one.
$('#searchOptionMap').click(function()
{
window.alert("map clicked");
});
So use a class instead, or make the panel external if it's going to be the same panel for both pages.
(#searchOptionMap2 works in this case because there's only one of them)

Bootstrap menu is open when page is loaded

I've implemented into my website the Bootstrap dropdown menu and the issue is that when I load the page, then as the default statue is popped up dropdown menu. I am struggling with how to have this dropdown menu hidden when the page is loaded as default.
Here's the HTML structure:
Sign in
<div class="login_window dropdown-menu">
...
</div>
So, when I load the page, the window is displayed. When I click somewhere, then is hidden. When I click on it, then will be displayed again. That's ok.
But I am trying to have the window have hidden when I load the page. How to achieve that?
Thanks

add display:none in default css for the class you want to hide...then in jquery do
$("body").click(function(){
$('.divclass').css('display','block'); /*or $('.divclass').toggle() */
})

My guess is that you have the structure of your HTML wrong. Did you look at the example on bootstrap? http://getbootstrap.com/components/#dropdowns
You need to have a clickable element (button, div, span - whatever) that's never hidden. When you click that element it animates the visibility of a sibling or child element to show the menu items. Try using the code from the sample and simply replace the <li> values with your menu items. That should help you understand the required form.
There is no need to toggle visibility on your own.