i am struggling writing the appropriate javascript to collapse and expand my content
View:
<div>
<h3 id="roleHeader" class="roleHeader collapsible">Title</h3>
<div>Content to display to users</div>
</div>
javascript:
$(document).ready(function() {
//collapsible management
$('.collapsible').collapsible({
});
});
You can implement one very easily
jQuery(function($){
$('.collapsible').click(function(){
$(this).next().stop(true, true).slideToggle();
}).next().hide()
})
Demo: Fiddle
You are probably looking for slideToggle. This function will toggle between sliding the content up and down.
try this
$(document).ready(function() {
$('.collapsible').click(function(){
$(this).slideToggle(500);
});
});
500 is the speed of the animation.
You can also target the object you'd like to hide and show. Either give it an Id, class, or target it specifically with jQuery. Here, when you click on anything that has a class of collapsible, the next div will hide and show.
$(document).ready(function() {
$(".collapsible").click(function(){
$(this).next("div").slideToggle(500);
});
});
If you need the animation to stop when you click on it again to prevent a jumping effect, add .stop(true) before the effect
$(document).ready(function() {
$(".collapsible").click(function(){
$(this).next("div").stop(true).slideToggle(500);
});
});
Related
I am using a simple jQuery .toggle hoping it would show/hide my content on click. It does that but my content always slides in from left to right until it's where it should be. I don't want it to slide in. Is there a better jQuery method for this or a property I need to specify?
Thanks! This is the jQuery code I'm using:
$(document).ready(
function(){
$('.img-lg').click(function () {
$('.content').toggle("slow");
});
}
);
Change $('.content').toggle("slow") to $('.content').toggle(). This will remove the transition
I'm trying to get a fade toggle to work. When you click on (+) two it is supposed to show two links and change to (-) two and when you press again it closes those links and goes back to (+) two. Right now, I can't get anything to happen when you press on the toggle.
<div id="ending">
An everyday snapshot of
<div class="toggle"><span style="font-size:11px">(+) </span>two </div> sfsfs
</div>
<div class="content">
sfs & sfsf
</div>
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).next('.content').slideToggle(450);
e.stopPropagation();
});
});
https://jsfiddle.net/Dar_T/b5tbfn5g/
1) You actually have to reference/include the jQuery library for jQuery functions to work.
2) You had an improper selector.
Rather than $(this).next('.content').slideToggle(450);
just use $('.content').slideToggle(450); or $(this).parent().next('.content').slideToggle(450);
The content div is not a sibling of the toggle div.. so next() isn't going to find it. But if you back up to the parent of the toggle div, then the content div is a sibling, so next() will find it.....
Depending on the rest of the markup, the selector may need to be further altered, but that's the main issue with the function overall.
Seems to work with the selector fixed and the jQuery library actually included.
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).parent().next('.content').slideToggle(450);
e.stopPropagation();
});
});
Updated Fiddle
I took this simple code for drop down menu and it's working so far. The problem is that when I load the page, #drop menu is displayed, which is obviously not what we want. The goal is to show the #drop menu when #submenu link is clicked, not immediately.
I modified my code below, because I need a div element, not a list.
js
$(document).ready( function(){
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
});
html
Products
<div id = "drop" >
DROP DOWN MENU
</div>
Add some css:
#drop { display: none; }
just put this code in your dropdown.
Products
<div id = "drop" style="display:none;">
DROP DOWN MENU
</div>
and your problem will be resolved when page load drop div will be hidden that u can use toggle or show command in jquery function.
Regards
Imran Qasim
Since you don't want your element to be displaced when the page first loads, why not set its visibilty to hidden in the html, like style="visbility:hidden",and assign submenu link an action listener function and reference this element via getElementById and set its visibility to visible.
document.getElementbyId("dropDownMenu").style.visibility = "visible"
If you dont't want to use css then you can do it with jquery.
Products
<div id = "drop" >
DROP DOWN MENU
</div>
<scitpt type="text/javascipt">
$(document).ready( function(){
$('#drop').hide();
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
})
</script>
Fiddle
I'm really new to Jquery so I really need a some help from you guys.
I have created a button, when clicked a pop up menu will appear. Now I have created a script, what it does is when that button is clicked the sideshow on the site background will be hidden (this is to make the pop up menu much smoother), my question is after a user closes down the pop up menu, how can I reshow the hidden slideshow again , I believe it has something to do with this code onHide: function()
<script>
jQuery(document).ready(function(){
jQuery('.menubutton').click(function(){
jQuery("#slideshow").css({"display":"none"});
});
});
</script>
To show and hide alternatively use .toggle()
jQuery("#slideshow").toggle()
Demo: Fiddle
To Hide an element use .hide()
jQuery("#slideshow").hide()
To Display a hidden an element use .show()
jQuery("#slideshow").show()
I believe jQuery.toggle() is what you are after:
jQuery(document).ready(function () {
jQuery('.menubutton').click(function () {
jQuery('#slideshow').toggle();
});
});
Fiddle: http://jsfiddle.net/QGdLw/1/
I have a div like this:
<div>
<font class='slideclick'>Click here to slidedown dynamic content</font>
<div class='slidedownonclick'> This is the content that slides down </div>
</div>
Jquery triggers the 'slidedownonclick' to slidedown when 'slideclick' is clicked. This works great but i have and indefinite amount on these div's reccuring in the same webpage, from a mysql database. Giving them unique id's is impossible. Is there any way that i could get only the 'slidedownonclick' in the same div as its respective 'slideclick' to slidedown when it is clicked.
Any help would be much appreciated,
thanks,
This will slide down the next .slidedownonclick div when .slideclick is clicked:
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').slideDown();
});
On a .slideclick handler you will find that sibling with:
$(this).find('+ .slidedownonclick');
or:
$(this).next('.slidedownonclick');
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').animate({
height: '+=50'
}, 1000);
});
Check about jQuery.next(), it's what do you want.
Using it you can get the next sibbling which class/id is the selector.
EDITED:
until jQuery 1.6.4
jQuery(document).delegate('font.slideclick', 'click', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});
jQuery 1.7 +
jQuery(document).on('click', 'font.slideclick', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});