Having trouble with bootstraps collapse. I have 2 menu items, with a dropdown collapse. I'm trying to alternate/switch them so I DONT get to see both at the same time. I've tried using 'toggle:false' but that does't seem to be working with bootstrap.
Please see the codepen for a working demonstration. Currently am using data- tags to create the functionality.
I'm wondering whether the DOM treats the collapse functionality as 2 separate things and therefore doesn't correlate them together.
So I have
<div class="search-bar>...</div>
<div class="collapse" id="collapseExample">...</div>
<div class="collapse" id="collapseFilter">...</div>
Inside the search bar I have 2 anchor elements which trigger the collapse. And then a non-related drop-down.
<a id="search-button" data-toggle="collapse" href="#collapseExample">
<span class="icon-search"></span>Search
</a> <!--Simplified -->
So I'm not sure why BOTH dropdown collapse elements come down. I want it to work just like the accordion style
Thanks in advance.
You can force hiding other menu like this:
$("#search-button").click(function() {
$('#collapseFilter').collapse('hide');
});
$("#filter-button").click(function() {
$('#collapseExample').collapse('hide');
});
See JsFiddle of your demonstration. I hope it helps, Thanks
Related
<div class="hamburger">
hamburger
</div>
Hey guys I'm trying to create a hamburger menu like the menu in this link that I provided. i have nothing only html. And I don't know hoe create this? You guys can help me I think. Did you find anything like this? Or can you tell me how to do this?
https://www.hugeinc.com/us
Basically, you'll have 2 elements there - the button ('H' on the link you provided), and the navigation - list of links, that is hidden by default. Clicking on the 'H' button would show the navigation menu (and change text from H to Huge, or whatever you want).
<style>
.hidden {
display:none;
}
</style>
<div class="hamburger">
H
</div>
<div class="navigation hidden">
Link 1
Link 2
Link 3
</div>
<script>
$('.hamburger').click(function(){
$('.navigation').toggleClass('hidden');
$(this).text()==='H'?$(this).text('Huge'):$(this).text('H');
});
</script>
That's the basic idea how it would work. You can adjust it to your needs and style it how you want it to look.
(I haven't tested it, so it may contain some syntax errors - but the idea stands).
So I'm trying to collapse a sidebar which I have stored as an angular element. I've tried using the toggle script in the template URL and in my page code but neither are doing it. On every other page of the site, I still have the sidebar in non-angular form and it is collapsing without a problem.
heres the problem
plunkr
<div ng-app="appHeaderApp">
<div ng-controller="sidebarcon">
<div ng-repeat="stab in mySideTabs">
<app-sidebar info="stab"></app-sidebar>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div>
The short answer for this is that you are not using Angular correctly. If you're using Angular, do things the Angular way :)
After inspecting your website, it looks like you are using a directive for the sidebar. The collapsing functionality is being controlled by the "toggled" class, so we can use ng-class to toggle this.
So we can do something like:
<div ng-class="{toggled: toggled}"></div>
This conditionally applies a class. Then in your button that toggles the sidebar, you can do something like:
<button ng-click="toggled = !toggled">Toggle Sidebar</button>
This button will toggled the "toggled" boolean back and forth, which will toggle the class on the sidebar.
Getting weird problem on mobile (Chrome and Safari).
I have a modal say with id xyzModal with me. I have a link which opens this modal.On desktop link appears on hover only.
So on the mobile to overcome hover effect what I have done is display the link always and oveeride the hover method
$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});
Problem with this is modal comes and disappears immediately in fraction of second.
Strange part is its working fine if I do $('#xyzModal').modal() directly on the console. Moreover to the amazement modal working fine on the long press of the link also. Has anybody come across this behaviour.Its working fine in mobile firefox though.Cannot create a fiddle as fiddle will override my current library setup. Just tell me in which direction I need to search. Getting pretty clueless over here.
Thanks for your help in advance.
The easiest way to do this is to use Bootstrap's good ol' query classes (show/hide elements responsively) to swap between two modals in desktop and mobile and placing two buttons under query classes too.
Something like this:
HTML:
<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>
<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
<!--modal codes here-->
</div>
<div id="xyzModal2" class="visible-xs">
<!--modal codes here-->
</div>
JS:
$('#link1').hover(function(){
// place modal xyzModal1 code here
});
$("#link2").click(function() {
// place modal xyzModal2 code here
});
I am using twitter Bootstrap for expand-collapse effect and everythings is working but I have a problem when I click on some lement then all my divs with carousel class are expanding, does anyone knows how to solve this here is code example:
<div class="description collapse-group">
<!-- This div with class mehr-pfeil I am using as trigger for collapse. If user clicks on it, the content of collapse element should show.-->
<div class="mehr-pfeil" onclick=".collapse('toggle');">
<!-- But if user clicks on heading <a> then it shall go directly to article -->
<a href="/?id=2500,1111142">
<span>04.07.2014</span>
<span class="orange"> </span><span>Some content <span>
</a>
<p class="collapse">Some content</p>
</div>
<p class="collapse">Nicht das Erfinden neuer Themen, sondern das Umsetzen bestehender bzw. der in den Klausuren definierten.</p>
</div>
ps. this is just one example of my content which should be triggered with collapse. Just imagine that you have more than one.
UPDATE: Also problem appears always when I click on collapse element. For instance, if one element was closed then another opens and vice versa.
So I wanted to know how to triger tis action only for one lement with js:
This on click event I am currently using:
onclick="$(\'#main-content\').find(\'.collapse\').collapse(\'toggle\');">'."\n";
If you follow the example here you should be able to correctly implement the expand-collapse effect.
It's a little unclear to me what you're trying to ask; your explanation isn't very clear to me and I'm a little unsure what your code is trying to accomplish. BUT from what I can tell, the source of your issue may be the lack of id and href attributes in your tags.
An example might be something like this:
<div class="panel">
<a data-toggle="collapse" href="#collapsableDiv">Click me!</a>
<div id="collapsableDiv" class="panel-collapse collapse">
<p>Nicht das Erfinden neuer...</p>
</div>
</div>
I don't have the time to create a JSFiddle and check my work, but that's an example that should work for the fundamental basics of a bootstrap collapse. As long as you have bootstrap.js in your project you shouldn't need any custom JavaScript.
IMO using jQuery effects is cleaner and easier than Bootstrap; I am currently working on a project that was using Bootstrap collapse but the animation randomly stopped working, so I switched to using jQuery slide effects. Consider looking into that if bootstrap gives you too much trouble.
I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>
Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>
Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}
Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>
I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>