I just installed an accordion / collapsible element and on the page, it is functioning correctly. However, when navigating away and back, the previous 'close' action of the collapse is not retained. It's still open when I return.
Is there a way to retain the previous action of the collapse?
<div class="row">
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#demo">MORE</button>
<div id="demo" class="collapse in">
<div class="row">
Foo bar - Foo bar
</div>
</div>
</div>
you can simply check the documentation right here: Bootstrap collapse how to collapse or not collapse your accordion.
$('#demo').collapse({
toggle: false //you can simple untoggle your collapse on page load.
})
There is many more you can do too like:
.collapse('toggle') //Toggles a collapsible element to shown or hidden.
.collapse('show') //Shows a collapsible element.
.collapse('hide') //Hides a collapsible element.
Update
to save the current state of the dropdown, I will suggest you use Jquery.cookies to do so. This is a similar question to yours and I named all the steps there
I'm using bootstrap on WordPress using the _ib theme, and I would like to add in my own responsive menu for when window is less than 768px. By default bootstrap will convert the menu to a dropdown-toggle, which when clicked shows your original menu. What I would like to do is implement my own menu when it is used on a small device or at a low resolution.
How would I remove this dropdown-toggle? I have looked around the bootstrap JS files, but I'm no JS whizz, so I can't quite figure out how to simply scrap the dropdown-toggle.
Any help appreciated!
EDIT:
<div class="container">
<div class="row">
<div class="site-navigation-inner col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Go to...</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse navbar-responsive-collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div><!-- .navbar -->
</div>
</div>
</div><!-- .container -->
I tried the simple method of just removing this .navbar-toggle as I don't need it, but that actually removes the entire menu even on a full page window...
When you look at you index php page. You will see your navigation divs.
To turn off the behavior you can remove the toggle class.
<div class = container>
Etc
One of the classes will be a toggle class. Simply remove it.
What version is it? 2 or 3.
You can just replace the code with yours. I'm familiar with joomla with is basically html surrounding php.
If your looking to modify the css you will need to override it. How you do this easily will depend on wether your template uses CSS LESS or a custom.css file. You could even remove the navigation diva and replace with your own code utilizing bootstrap layout classes.
Giving the version of bootstrap will help with this question.
Bootstrap uses media queries you need to find what query you are targeting. Bootstrap website is very informative on this
http://getbootstrap.com/getting-started/
There are examples of layouts here. Make sure your nav divs and classes are the same. It will work.
Please back up or comment out old code for reuse.
When I get to my PC il look at code if not fixed by then.
You cofusing me slightly here. You have a menu (bootstrap) one and you have a plugin that is also calling a menu?
Or
Do you have two menus on the same page? Or does your plugin rely on the the current menu?
Im confused what you want here. It looks like you have a menu as part of the template and then you are calling a module to create a menu in the form of a plugin. It will not work if this is the case.
The plugin menu may conflict with the existing menu. If you have your own existing menu why dont you just remove the entire template menu and then just let your plugin be called?
If I am way of the mark I apologize. However if a plugin is involved the code is an unknown!
Is the plugin an addon to the template? If not you may have a conflict
Think you may need to contact the developer of the plugin
How do I show a fixed position element, when it's parent element is hidden (display: none)?
My scenario.
I have a bottom, fixed toolbar with five buttons across the bar. One of those buttons is a More/Less button that expands and retracts the toolbar showing even more buttons. Inside each button div is a panel element. So, when a button is clicked its panel element is shown and moved so that it sits above the selected button.
Here is some sample markup:
<div id="dashbar" class="dashbar">
<div id="dashbar-apps" class="dashbar-apps">
<!-- The More/Less Button -->
<!-- My First Button -->
<div id="dash-projects" class="dash-button">
<i class="fa fa-area-chart fa-fw icon"></i>
My Projects
<ul class="dash-menu" id="dash-projects-menu">
<li>Some</li>
<li>Links</li>
<li>Here</li>
</ul>
</div>
<!-- Any number of additional appbar buttons -->
</div> <!-- for the appbar that is always visible -->
<div id="app-deck" class="dash-app-deck">
<!-- The exact same markup for the buttons -->
</div>
</div> <!-- for the dashbar as a whole -->
The More/Less button toggles the appdeck visibility with a simple slide animation.
What I want is for someone to be able to expand the dashbar and click one of the buttons in the appdeck portion. Then the toolbar retracts automatically and displays the panel element associated with that button.
Everything works fine except that when the toolbar retracts, it hides the appdeck and (therefore) all the elements inside it -- including the panel element I'm trying to show.
I've played with detaching and moving the element to the body, but that seems excessive. Is there another way to simply show the element when it's parent is hidden?
Thanks.
I have two containers, as displayed in this FIDDLE.
Both have content that can become quite lengthy, thus I need to use overflow: auto on both containers.
The HTML structure:
<div id="maincontainer">
<div id="left-container" class="go-left overflow-y-auto">
<div id="left-inner-container">Contents</div>
</div>
<div id="right-container" class="go-right overflow-y-auto">
<div id="right-inner-container">
<div id="button-wrapper">
<button type="button" id="tip_button" class="btn primary customized-button">tip</button>
</div>
</div>
</div>
</div>
I have a button within the #right-container that creates a tooltip on click, displayed right next to it. The problem is that, when I have lengthy content (that determines scroll bar to appear), the tooltip won't be placed near the button (on scroll). It will remain relative to the #maincontainer. If I make it relative to the #right-container the tooltip will be 'chopped' (due to overflow).
What I'm seeking is to have the tooltip aligned next to the button when the user scrolls down that area.
If you are using Bootstrap tooltip then add class 'bootstrap-demo' to parent div of button & make sure you are NOT passing container:'body' parameter when initializing tooltip.
These "accordion submenus" work in chrome and firefox, but not on an iphone.
I have built a site which includes an "offcanvas" navigation menu on smaller screens. The user clicks "the hot dog button", and the navigation menu slides onto the screen from the left... that works great so far.
Some of the navigation elements contain submenus. For those, I used bootstrap's accordion markup. The user clicks an arrow, and the "submenu" expands.
The Problem
I develop using chrome on linux. This mechanism works perfectly in chrome, firefox, and every browser I can get my hands on, as well as on my personal android phone. It also works on responsinator.com. However, since I don't have Safari, nor an iPhone, I have not been able to test this functionality directly on an iphone. I am working on getting an iPhone emulator...
Until then, some other people have looked at this on an iPhone, and I am told the "submenus" do not work at all. When the user clicks the arrow, nothing happens...
Here is an excerpt of a "menu item" containing a "sub-menu": please note I am using the 'data-toggle' and 'data-target' attributes:
<div class="panel panel-default">
<!-- The "Trigger" -->
<div class="panel-heading">
<h4 class="panel-title">
<a href="view.php?cms_nav_id=1" name="about">
About</a>
<a data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
</h4>
</div>
<!-- Populated submenus: -->
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Ohio Improvement Process
</div>
<div class="panel-body">
Organization Beliefs
</div>
</div>
</div><!-- /.panel -->
I really don't know what to try next: Similar questions have ended with "a css conflict" or iphone problems regarding .click(), but I am not using that: I am using data-toggle/data-target. I am considering abandoning the 'data-target' markup in favor of manually invoking an on('click', ... ) event, but I would rather not...
By the way, I call this at the bottom of my page if that's relevant:
<script src="/assets/dist/js/bootstrap.min.js"></script>
Which is 'bootstrap.js v3.0.0' .
Does anyone have any other clues? Any recent direct experience with an issue like this?
Thanks in advance for your help.
So I think I figured this out: my original markup relied solely on the data-target element, but that is apparently not enough. Safari (on iPhone) seems to also need the href attribute (which really should be there on an <a> anyway. So this works:
<a data-toggle="collapse" data-target="#collapse1" href="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
But this does not:
<a data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
For me, collapse would work on desktop and iphone, but some of my collapses were not working on ipads. It turned out that perfect solution for me was given by #Loris in #Ryan's answer, to add the pointer style to any collapsable trigger (e.g., a div acting as a button). I generalized this to the following CSS:
[data-toggle~="collapse"] {
cursor: pointer;
}
looking at this, I had the same problem, however, when you add a href="#collapse1", it jumps you to the top of the page. I fixed this by wrapping the element in a button and removed the css for buttons. So, your code would be:
<button data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</button>
Hope this helps.
You can fix this by simply adding this attribute to the div that triggers the dropdown.
cursor: pointer;
This is working for me :
$('.divClassName').on('click touchstart', function () {
$($(this).data('target')).collapse('toggle');
});
To make this work for any element type, such as a div, you can use the following jQuery method (tested ios 8):
<div class="collapse-header" data-target="#collapse_0">
Click this element...
</div>
<div id="collapse_0">
...to collapse this element.
</div>
<script>
$('.collapse-header').on('click', function () {
$($(this).data('target')).collapse('toggle');
});
</script>
for further reference:
I did this in my application:
a[data-toggle="collapse"]{
cursor:pointer;
}
And it fixed the problem.
In the MDN documentation says this:
"Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. ) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of 'clickable element'"
References:
https://github.com/twbs/bootstrap/issues/16213
https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
Enabling the animation will cause some problems in IOS devices. Disable it and it will work. That was the case for me.
[isAnimated]="false"