Develop Reference

CSS toggler using Javascript

I want to toggle the white-space style of a tr element to normal when the tr is clicked. I've managed to take a function used for toggling colours and adapt this for my purposes, however I can only make the class change toggle once, and don't know how to change the this.style.background in line 3 to this.style.white-space, without breaking everything:
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
I know this is fairly basic, however I've only started using JavaScript today, so if anyone could show me the solution and explain what needs to be done then I'd be very appreciative.

You just need to change the if condition so it depends on the value of white-space property:
$(document).ready(function () {
$('tr').click(function () {
var $this = $(this);
if($this.css('white-space') === 'nowrap') {
$this.css('white-space', 'normal');
}
else {
$this.css('white-space', 'nowrap');
}
});
});

You just need to use white-space for your ifstatements, and refactor those if statements. Fixed code below:
$(document).ready(function () {
$('tr').click(function () {
if($(this).css("white-space") == "nowrap") {
$(this).css('white-space', 'normal');
}
else {
$(this).css('white-space', 'nowrap');
}
});
});
Hopefully this helps!

Jquery: changing text inside a button when toggle 'show'

I've created a toggle button to show and hide a div, but I'd like the text inside the button to change from 'Show Content' to "Hide Content' as you toggle 'show' on the #content div. This is a little over my head as I'm still learning jQuery. Any help would be much appreciated!
EDIT: I've discovered since I have many posts on a single page, and the code is repeated in all posts, when I click the button to show content on one post it shows the content on all the posts. How can this be remedied?
HTML
<div class="post-content">
<button id='content-button'>Show Content</button>
<div id='content'>Hello World</div>
</div>
CSS
#content
{
display:none;
}
JQUERY
jQuery(document).ready(function(){
jQuery('#content-button').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
http://jsfiddle.net/syctdh46/

You can do like this,
jQuery(document).ready(function() {
jQuery('#content-button').live('click', function(event) {
$('#content').is(":visible") ? $(this).text("Show Content") : $(this).text("Hide Content");
jQuery('#content').toggle();
});
});
Check the visibility of the div using is(":visible"), then change the text
Fiddle
Edit
jQuery('#content-button').live('click', function(event) {
$(this).next().is(":visible") ? $(this).text("Show Content") : $(this).text("Hide Content");
$(this).next().toggle();
});

You can use a variable to keep when button is clicked and change text:
jQuery(document).ready(function () {
var i = 0;
jQuery('#content-button').live('click', function (event) {
jQuery('#content').toggle('show');
if (i == 0) {
$(this).text("Hide Content");
i = 1;
} else {
$(this).text("Show Content");
i = 0;
}
});
});
fiddle

jQuery(document).ready(function(){
jQuery('#content-button').live('click', function(event) {
if(jQuery('#content').is(":hidden")){
jQuery(this).text("Hide Content");
jQuery('#content').show();
}
else{
jQuery(this).text("Show Content");
jQuery('#content').hide();
}
});
});

Use .text to change text of button
jQuery(document).ready(function(){
jQuery('#content-button').live('click', function(event) {
jQuery('#content').toggle('show');
////////////////////////////code to change text
if($('#content-button').text()=="Show Content")
{
$('#content-button').text('hide content');
}
else
{
$('#content-button').text('show content');
}
////////////////////////////
});});
http://jsfiddle.net/syctdh46/11/

try
jQuery(document).ready(function () {
jQuery('#content-button').live('click', function (event) {
jQuery('#content').toggle('show', function () {
if ($(this).is(":visible")) {
$('#content-button').text("Show Content");
} else {
$('#content-button').text("Hide Content");
}
});
});
});
DEMO

I would simply code (sorry for the slide effect, but perhaps you are interested in this too):
JQuery('#content-button').live('click', function(event) {
JQuery("#content").slideToggle("slow",function(){
if (JQuery("#content").css("display")=="none"){
JQuery(this).text("Show Content");
} else {
JQuery(this).text("Hide Content");
}
});
});

Most of the answers are similar here.
Why not innovate and add a custom function here.
$.fn.toggleText = function(t1, t2){
if (this.text() == t1) this.text(t2);
else this.text(t1);
return this;
};
And then just edit you code to use the function. So you can use this function anywhere else in your code. Simplifies thing.
jQuery(document).ready(function(){
jQuery('#content-button').live('click', function(event) {
$(event.target).toggleText('Show Content', 'Hide Content'); //Add this line
jQuery('#content').toggle('show');
});
});

jQuery - how to hide an element if ANY of the activating elements are opened?

To further clarify this problem, here's the current situation: http://jsfiddle.net/Laqqw/1/
I need to hide the bottom element, when ANY of the navs are opened. And when all the navs are closed, the bottom element would show up again.
toggle() doesn't work, because it sometimes ends up not showing the bottom element when all the navs are closed.
I tried using if else with no sensible results. Am I missing something here?
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("footer").hide(300);
} else {
$("footer").show(300);
}
});
});
});

Try this,
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300, function(){
if($("p:visible").length == 0)
$("footer").show(300);
else
$("footer").hide(300);
});
});
});
Check jsfiddle

try like this:
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("#footer").hide(300);
} else {
$("#footer").show(300);
}
});
});
});

Javascript toggle menu collapsed issue

I have created a Javascript toggle menu:
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.toggle').next().slideUp("fast").removeClass("expanded");
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
When I click on another item in the menu, the class "expanded" is not removed from the other elements. I've tried many different things but can't get my head around it. Any help would be appreciated.

$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
$(this).addClass('collapsed');
$(this).removeClass('expanded');
} else {
var $expandedItems = $('.expanded');
$expandedItems.next().slideUp("fast")
$expandedItems.addClass('collapsed');
$expandedItems.removeClass('expanded');
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
Based on your comments I think you are after something like this.

$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.expanded').removeClass('expanded');//here is your problem
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
This should be remove expanded class from your jquery code
Note Tested although please tell me if its not working
updated
Demo
And for jquery i think you are missing too much information here check demo here Demo

Small JavaScript/jQuery mouseleave question

I got this small JavaScript using jQuery that slides down a ul when an image is clicked:
$(document).ready(function () {
$('img.menu_class').click(function() {
$('ul.the_menu').slideToggle('medium');
});
});
I was wondering if I could modify it to recognize when the mouse leaves the ul/image and make it slide back instead of having the user click on the image again. If I use something else than click() it would (naturally) only apply to the image and won't recognize the ul as an object. Any suggestions?

you can use jquery mouseout()

Try this
$('img.menu_class').bind('mouseleave',function() {
$('ul.the_menu').slideToggle('medium');
});
or
$('img.menu_class').bind('hover',function() {
$('ul.the_menu').slideToggle('medium');
});
Use this code.
This is my updated code
Use this code to slidedown ur list once mouse hover on image and remains open
$(document).ready(function () {
$('img.menu_class').bind('hover mouseleave',function() {
$('ul.the_menu').slideDown('medium');
});
//to close ul
$('#id_of_close_element').bind('click',function() {
$('ul.the_menu').slideUp('medium');
});
});

This is the whole code (added some image swapping to the whole thing), working at all major (updated) browsers at the moment. Not very clean and probably could be done easier but it works:
$(document).ready(function() {
$('ul.menu_body').hide();
if ($.browser.msie && $.browser.version < 8) {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
$('.menu_body').css("font-weight","normal");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
} else {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
$('.dropdown').mouseleave(function() {
if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
}
});