I'm trying to create a form that uses accordions for organization using Foundation 6. I want to add inputs and buttons to the accordion title. Normally when the accordion title is clicked it, it toggles its content by sliding. I want to disable this effect, so that if I click the button in the title the content won't toggle, since it's really annoying if it expands and contracts every time I click the button.
I have something like:
$body.on('click', '.button_on_title', function (event) {
// do stuff
});
I've tried event.preventDefault() and event.stopPropagation(), and they have no effect. It seems like Foundation 6 is somehow overriding the event stack?
Edit:
To clarify, I want to prevent the accordion from opening and closing when clicked, not just remove the sliding animation.
You just need to set the slide speed to 0 to disable the animation. One easy way to set the slide speed is through the data-slide-speed data attribute.
Here is the example from the docs with this attribute added:
<ul class="accordion" data-accordion data-slide-speed="0">
<li class="accordion-item is-active">
<a class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
I would start in the open state, due to using the `is-active` state class.
</div>
</li>
<!-- ... -->
</ul>
Related
All Bootstrap Dropdown menu examples show the items having an link like:
<li>a</li>
How can I make a Bootstrap dropdown menu where choosing an item triggers a javascript method?
(If it makes a difference, the menu items will also be added to the menu using javascript/jquery initially)
Is this just a matter of adding a click function to each <li>? Or does Bootstrap provide special handling for its dropdown items?
If I add a click function, do I still need each item to also have the <a href="#"> tag around the text?
Looks like the answer is:
Bootstrap does not supply any special handling for clicks on its
dropdown menu items; and
I could add a click function to each item in the list; or
I could use event delegation to add the click function to the list
itself, and it will be triggered on each child's click
Thanks to #Pevara and #spaceman for getting me rolling.
When I hover over the dropdowns on:
Website with Issue
They do not open unless they are clicked. The website is built using Foundation5 (FoundationPress) and I am not able to figure out how to disable this behaviour in favour of having the dropdown appear on hover.
Thanks
Try using the hoverable dropdown options on the menu accessed through the data-options attribute. Similar convention with some of your content below as an example:
Course Locations
<ul id="hover1" class="f-dropdown" data-dropdown-content>
<li>Brampton</li>
<li>Burlington</li>
<li>Hampton</li>
<li>etc.</li>
</ul>
You can set the hover_timout in milliseconds to delay closing after removing your mouse from the area.
Docs for this here: http://foundation.zurb.com/docs/components/dropdown.html
I have a sidebar that looks somewhat like this site's sidebar: http://scotch.io/
If you hover over tutorials it expands the element with a menu of items to choose from.
What I am trying to do is get it so if I click one of those elements it shows a nice popover instead of expanding the entire sidebar. Something that could ease in, but if it just shows up that's fine too.
I looked at the bootstrap 3 popover but it seems to only work with buttons, and what I am using is this for one of my list elements:
<li class="sidebar-available-rooms" data-container="body">
<a class="fa fa-comments" id="sidebar-icon-comments" data-toggle="popover" data-placement="right"></a>
<span class="sidebar-text" id="sidebar-available-rooms-text">Available Rooms</span>
</li>
I would to be able to click it and in the simplest form, get a popover to the right of the element.
Thanks
Use a little piece of jQuery and it also works on links.
$("[data-toggle=popover]").popover({html:true})
Check this fiddle: http://jsfiddle.net/HsZ9q/5/
I am designing an admin panel for my application using nested tabs. Here is a basic diagram of how the tabs are set up.
Initially Active and Visible
-1a Initially Active and Visible
-1b Inactive
-1c Inactive
Inactive
-2a Initially Active but NOT Visible
-2b Inactive
-2c Inactive
2a is not visible at first because its parent(2) is not active however 2a does have the tag:
<li class='active'>
When I click on tab 2, tab 2a appears to be active, but the tab-pane is empty. Looking at the page source shows that there is data in the tab-pane for 2a. In order to see it I must click on tab 2b, then click back to tab 2a. My first thought was to remove .active from 2a. This then requires the user to click on 2a to active it instead of de-activating then re-activating to display the content. What I want to happen is for 2a to be immediately visible when tab 2 is clicked. Sorry for the long explanation. Below is the code if that is easier for you to sort through.
I placed the HTML code in this jsfiddle because it was too long to include in the post.
http://jsfiddle.net/vhFFf/
EDIT:
Here is a working fiddle that accurately shows the issue I am trying to correct:
http://jsfiddle.net/52VtD/4862/
Be sure to drag the Result pane as wide as possible so that the content displays as intended. When you click the "Users" button in the most left menu, the initially active pane content is not displayed. You must click "add user" or "trash" then click back to "Users" to see that panes content.
I think you have to manually add the active class to the pane to make it active when you switch to that tab <div class="tab-pane active" id="user"> I updated you FIDDLE
that was the simplest solution I could think of hope it helps.
I want to make an application making use of twitter's bootstrap framework. I have a navbar that functions like a File Menu bar with File/Edit/Help/etc.
I like the fact that you need to click to make the dropdown appear, however how can I make it where it will dropdown the Edit menu for instance when moving from the File menu (after it is clicked and dropped down).
An example of this is going to google docs, clicking one menu and then moving to another menu item it will dropdown the new hovered menu
My solution: for your <ul> element make two classes.
One for example doc-menu other normal-menu.
On menu item click: your <li> should get class="active" and <ul class="doc-menu".
Then show up inner <ul><li>....</ul> inside <li class="active"> and keep it up even if not hovered. On other doc-menu item hover you change the active class to other <li> element. This can be done by listening to mouseover using javascript. When clicked on background or inner <ul><li>....</ul> change <ul class="doc-menu"> to <ul class="normal-menu>