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
Related
I use Jquery toggle method to view a div when a button is clicked
$("button").click(function(){
$("#divId").toggle();
});
Works fine but the initial value is set to be viewed or as the css property display:block so when the page initially loads the div is viewed and I have to click the button to close it.
what other answers suggested is that I change the css property but I do not want that as that will hide the div and if the user had their javascript not working for any reason, that would not be good.
So I want to hide the div initially with javascript and then comes Jquery's toggle method working normally. I tried document.getElementById(divId).style.dsplay="none" and put it right before the toggle method, but that makes the toggle not work and just hides the div.
You may set initial value to hide the div by this way:
$(document).ready(function(){
$("#divId").hide();
$("button").click(function(){
$("#divId").toggle();
});
});
After you click the button. it will toggle to open the page.
Try this to hide div on page load:
$(document).ready(function(){
$("#divId").hide(); //or .toggle()
});
[UPDATE]
Or if you have more advanced logic on click event and you want it to also run on load:
$(document).ready(function(){
$("button").trigger('click');
});
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);
});
});
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 this jQuery call for a dropdown. On click, the background image of an inner container changes its background image. How do I change the background image for the inner container back?
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").css("background-image","url(carrow.png)");
});
});
I suggest using toggleClass():
CSS
.yourNewBackground {
background-image: url(carrow.png);
}
JavaScript
$(document).ready(function () {
$('#listH1').click(function () {
$('#content1').slideToggle('medium');
$(".span").toggleClass("yourNewBackground");
});
});
EDIT
Here's a working fiddle. A couple things to note:
When working with a fiddle, make sure you select the appropriate framework. You had MooTools selected (the default), instead of jQuery.
toggleClass() wasn't working because of the span class. Adding !important to the toggleDown class was all that was needed.
If the background is set in a style sheetfile, you can just delete the custom style-attribute you created there:
$(".span").css('background-image', '');
I would like this div to slide up to be hidden and I can figure out how to do that. The way it is set up now is when I click on #aboutclick and #contactclick then .thumb just disapears. I would like for it to slide up and disappear.
Does anyone know how to do this?
$(document).ready(function(){
$(".thumb").hide();
$("#aboutclick, #contactclick").show();
$("#aboutclick, #contactclick").click(function(){
$(".thumb").hide();
});
});
http://dl.dropbox.com/u/14080718/Final/UITabs15.html
use jQuery's slideUp() function for that. It also takes time.
The name of this function exactly describes what you want to do, to slide up the object, and to hide it (because its height would become zero). There is also another function called slideDown() which does the opposite, and matches this animation. Also, another function named slideToggle() also might become more handy, when you already don't know that current state of your object, and only want to toggle it.
$(document).ready(function () {
$(".thumb").hide();
$("#aboutclick, #contactclick").show();
$("#aboutclick, #contactclick").click(function () {
$(".thumb").hide(1000);
});
});
you could animate for this feature. like this,
$(".thumb").animate({height:0,opacity:0},1000,function(){$(".thumb").hide()})
Use .toggle() and then .hide();