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>
Related
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
i have bootstrap Modal . and i have 3 images on it . what i want that when i click on any of this images change HTML of div.text , but its change all the div that take .text class i need change the html of the current div that i opened the modal . any help !!
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test111</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test2222</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test3333</div>
</div>
</div>
Jquery :
$("#img1").click(function(){
$(".text").html("Its woking")
});
I just made a Bootply with following code:
$("a[data-toggle='modal']").click(function(){
$("a[data-toggle='modal']").removeClass("active");
$(this).addClass("active");
});
$("#myModal img").click(function(){
$("a.active").next(".text").html("Its working");
});
When a Modal link is clicked, it sets the class active to the link that opened the modal. When an image in the modal is clicked, the text that should be changed can be identified as it's the text next to the active link.
The only adjustment of your markup was to add some example content inside the anchor tag - <a data-toggle="modal" data-target="#myModal">Modal</a> instead of <a data-toggle="modal" data-target="#myModal"></a>, otherwise it wouldn't be possible (at least for this example) to open the modal.
Just in case - the bootply already wraps the code in a $(document).ready(), so the above code has to be wrapped in
$(document).ready(function() {
// above code here
});
in order to work.
Update: As mentioned as comment, above approach doesn't work for the original markup because there the div with the class text is not next to the link, but there are other divs between them.
I've adjusted this in another Bootply with following code change:
$("#myModal img").click(function(){
$("a.active").closest(".Widget").find(".text").html("Its working");
});
When the image is clicked, closest() selects the closest parent of the active link and find() selects the child element with the class text.
Depending on the actual markup it's also possible to select closest(".press") instead of closest(".Widget") (both will work for this example), it's only necessary to select a parent container of the link and the text.
Because Bootply was sometimes down when I made these changes, I've added this also in a Fiddle without bootstrap, just as example for the functionality.
For reference: http://api.jquery.com/closest/
can not see where $('#img1') in the code your provided. But I guess what you need is $(this), something like:
$('.imgs').click(function(){
$(this).html()....
});
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 am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.
Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/
If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/
I have a page that uses jQuery tabs. Each tab contains one or more jQuery accordions, which are generated dynamically, in addition to other stuff. Example:
<div id="tab1" class="tab">
<div>
Some stuff
</div>
<div class="accordion">
I am an accordion
</div>
</div>
<div id="tab2" class="tab">
<div class="accordion">
I am also an accordion
</div>
More stuff
<div class="accordion">
I am also an accordion
</div>
</div>
I would like the first accordion in each tab to remain open, while the others (if there are any) are collapsed. I have tried:
$('.tab .accordion:first')
which only selects the first accordion on the page (obviously). I also tried:
$('.tab .accordion:first-child')
This selects the first accordion in tab2 but it doesn't select the one in tab1 because there's some stuff above it. I've also tried:
$('.tab > .accordion').filter(':first-child')
$('.tab').children('.accordion:first-child')
Along with about every combination of selectors I can think of. At this point my brain is fried. Before you point me to a duplicate question, none of these are asking the same question exactly:
JQuery Tab each Selected tab first text box focus
jquery select first child with class of a parent with class
jQuery selector for each first element on every parent
jQuery Selecting the first child with a specific attribute
The difference in my case is I have very little control over what content shows up in these tabs.
I'd suggest:
$('.tab').find('.accordion:first');
JS Fiddle proof-of-concept.
Try this:
$('.accordion:first', '.tab')