We Keep Coding

jQuery slidetoggle() divs using multiple id

I am using this jQuery script to open and close multiple divs on a page.
<script type="text/javascript">
jQuery(document).ready(function(){
$("#expanderHead").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").html("−")
}
else {
$("#expanderSign").text("+")
}
});
$("#expanderHead2").click(function(){
$("#expanderContent2").slideToggle();
if ($("#expanderSign2").text() == "+"){
$("#expanderSign2").html("−")
}
else {
$("#expanderSign2").text("+")
}
});
$("#expanderHead3").click(function(){
$("#expanderContent3").slideToggle();
if ($("#expanderSign3").text() == "+"){
$("#expanderSign3").html("−")
}
else {
$("#expanderSign3").text("+")
}
});
$("#expanderHead4").click(function(){
$("#expanderContent4").slideToggle();
if ($("#expanderSign4").text() == "+"){
$("#expanderSign4").html("−")
}
else {
$("#expanderSign4").text("+")
}
});
$("#expanderHead5").click(function(){
$("#expanderContent5").slideToggle();
if ($("#expanderSign5").text() == "+"){
$("#expanderSign5").html("−")
}
else {
$("#expanderSign5").text("+")
}
});
$("#expanderHead6").click(function(){
$("#expanderContent6").slideToggle();
if ($("#expanderSign6").text() == "+"){
$("#expanderSign6").html("−")
}
else {
$("#expanderSign6").text("+")
}
});
$("#expanderHead7").click(function(){
$("#expanderContent7").slideToggle();
if ($("#expanderSign7").text() == "+"){
$("#expanderSign7").html("−")
}
else {
$("#expanderSign7").text("+")
}
});
$("#expanderHead8").click(function(){
$("#expanderContent8").slideToggle();
if ($("#expanderSign8").text() == "+"){
$("#expanderSign8").html("−")
}
else {
$("#expanderSign8").text("+")
}
});
$("#openalltext").click(function(){
$(".openall").slideToggle();
if ($("#expanderSign8, #expanderSign7").text() == "+"){
$("#expanderSign8, #expanderSign7").html("−")
}
else {
$("#expanderSign8, #expanderSign7").text("+")
}
});
});
</script>
Everything works fine except, I am trying to select multiple id's so I can change the "expandersign" on all the divs when clicking "expand all". I also tried using a class name so I only need one selector but it didn't work.
$("#openalltext").click(function(){
$(".openall").slideToggle();
if ($("#expanderSign8, #expanderSign7").text() == "+"){
$("#expanderSign8, #expanderSign7").html("−")
}
else {
$("#expanderSign8, #expanderSign7").text("+")
}
});
How can I select multiple div id's?
This is html for my expand all link --
<h4 id="openalltext" class="dctopall" style="cursor:pointer;margin-bottom: 0 !important;">Expand All</h4>
As for the divs being toggled, each of them are as follows --
<h4 id="expanderHead" class="dctop" style="cursor:pointer;margin-bottom: 0 !important;">Title Text <span id="expanderSign" class="exSign">+</span>
</h4>
<div id="expanderContent" class="openall" style="display:none">content</div>
This is what worked for me -
$("#openalltext").click(function(){
$(".openall").slideToggle();
$("#expanderSign8, #expanderSign7, #expanderSign6, #expanderSign5, #expanderSign4, #expanderSign3, #expanderSign2, #expanderSign").each(function() {
if ($(this).text() == "+") {
$(this).text("−")
} else {
$(this).text("+")
}
});
});

Your idea is good, but you need to target each element individually in a loop :
$("#expanderSign8, #expanderSign7, ...etc").each(function() {
if ($(this).text() == "+") {
$(this).text("−")
} else {
$(this).text("+")
}
});

Your complete code can be one click if you use classes and find. Your all code can also use a class and the each to loop.
$(function(){
$(".expanderHead").on("click",function(){
$(this).find(".expanderContent").slideToggle();
var $sign = $(this).find(".expanderSign");
$sign.text() = $sign.text() == "+"?"−":"+";
});
$("#openalltext").on("click",function(){
$(".openall").slideToggle();
$(".expanderSign").each(function() {
$(this).text() = $(this).text() == "+"?"-":"+";
});
});
});

Javascript/JQuery Nested if statements not working correctly

JSFiddle demonstrating problem (pretty hard to see with the corner box)
I have 4 elements that are linked to each button. When the button corresponding with the section is pressed, it should check that none of the other 3 elements are visible. If another section is visible, it should slide it up before sliding down the desired section.
I thought the best way to do this was nested if statements (if b is visible then if c is visible and so on). At the moment, it works for the first 2 elements, this being because the first if statement corresponds to each of them. However for the others, it's as if it doesn't even get past the first statement and just slides down the section anyway, resulting in multiple sections being open.
Am i using nested if statements incorrectly or is it something that isn't compatible? I don't know if it would be better to hide the sections using jquery instead of css, but i assumed it would work regardless. If I've missed anything out, feel free to ask.
Thanks
(Javascript Code)
$(document).ready(function(){
$("#web-design").click(function(){
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#web-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#web-design-slide").slideDown();
}
});
$("#graphic-design").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#graphic-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
});
$("#branding").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#branding-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#branding-slide").slideDown();
}
});
$("#film-production").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
$("#film-production-slide").slideDown();
} else {
$("#branding-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
});
$("#contactFormTitle").click(function(){
if ($("#contactFormArea").css("visibility") == "hidden") {
$("#contactFormArea").slideDown();
} else {
$("#contactFormArea").slideUp();
}
});
});

Your should add class to your container and before showing the desired container, hide all container with that class.
Example
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
$('.accordion').click(function() {
$('.accordion').slideUp();
$(this).slideDown();
});
Your example
$("#web-design").click(function(){
$(".div-to-hide").slideUp();
$("#web-design-slide").slideDown();
});
$("#graphic-design").click(function(){
$(".div-to-hide").slideUp();
$("#graphic-design-slide").slideDown();
});
<div class = "serviceSliderFilmProduction div-to-hide" id = "film-production-slide">
div-to-hide class is added to your container

Add a slider class (or any other) to each container and link the container with button using data attribute:
Button:
<button class="serviceButton displayed" data-id="#web-design-slide">Find Out More!</button>
Container:
<div class="slider serviceSliderWebDesign" id="web-design-slide">
...
</div>
Script:
$(".serviceButton").click(function(){
// grab the container id from data-id attribute of the button:
var el_id = $(this).data('id');
$('.slider:not('+el_id+')').slideUp('slow', function(){
$(el_id).slideDown();
});
});
DEMO
If you want to also toggle container on click, use slideToggle():
$(".serviceButton").click(function () {
var el_id = $(this).data('id');
$('.slider:not(' + el_id + ')').slideUp();
$(el_id).slideToggle();
});
DEMO

How to add a class to a div on load?

Here's what I'm using
$(document).ready(function() {
$(".accept").change(function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
});
});
It works after you change the value, but how do I add the style to the div on load to disable?
Do I simpily juse call
$(".generateBtn").addClass("disable");
Or is there a more elegant technique

How about just triggering a change ?
$(document).ready(function() {
$(".accept").on('change', function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
}).trigger('change');
});
I'm guessing you meant to write removeClass and not remove, if so :
$(document).ready(function() {
$(".accept").on('change', function () {
$(".generateBtn").toggleClass('disable', this.value=='0');
}).trigger('change');
});

Changing Javascript to Jquery

I used to have two buttons which flicked between thumbs up and down remembered the state and loaded it on refresh. It looked like this.
var thumbStatus;
//If thumbs up is tapped change styles of each button and save to LocalStorage
function thumbsup() {
document.getElementById("thumbsup").classList.remove("btn-default")
document.getElementById("thumbsup").classList.add("btn-success")
document.getElementById("thumbsdown").classList.remove("btn-danger")
document.getElementById("thumbsdown").classList.add("btn-default")
localStorage.setItem('thumbstatus3840210', 'up');
}
//If thumbs down is tapped change styles of each button and save to LocalStorage
function thumbsdown() {
document.getElementById("thumbsdown").classList.remove("btn-default")
document.getElementById("thumbsdown").classList.add("btn-danger")
document.getElementById("thumbsup").classList.remove("btn-success")
document.getElementById("thumbsup").classList.add("btn-default")
localStorage.setItem('thumbstatus3840210', 'down');
}
//If thumbs up was the last button to be tapped, show this on page load
function Loadthumbs() {
if (localStorage.getItem('thumbstatus3840210') === 'up') {
thumbsup();
}
//If thumbs down was the last button to be tapped, show this on page load
if (localStorage.getItem('thumbstatus3840210') === 'down') {
thumbsdown();
}
}
How can I do this using Jquery. So far I have this. It only styles the buttons At the moment with no saving of data?
$(function() {
$("#thumbsup").click(function() {
$(this).addClass("thumbsup")
$("#thumbsdown").removeClass("thumbsdown")
});
$("#thumbsdown").click(function() {
$(this).addClass("thumbsdown")
$("#thumbsup").removeClass("thumbsup")
});
});

I am guessing this is what you want (your own jQuery doesn't make much sense). I wrote the function in their own place so you could edit them easily or use them in other calls, but you sure can place them directly in the click function. I also think you want to run the loadthumbs function on document ready, so I did that as well.
Also, I used an else-if function. It seems more logical to me than two if functions. Simply an else function is possible as well, but I don't know which values can be given to the item. So just to be safe an else if seems fine.
$(document).ready(function () {
function thumbsup() {
$("#thumbsup").removeClass("btn-default").addClass("btn-success");
$("#thumbsdown").removeClass("btn-danger").addClass("btn-default");
localStorage.setItem('thumbstatus3840210', 'up');
}
function thumbsdown() {
$("#thumbsdown").removeClass("btn-default").addClass("btn-success");
$("#thumbsup").removeClass("btn-danger").addClass("btn-default");
localStorage.setItem('thumbstatus3840210', 'down');
}
function Loadthumbs() {
if (localStorage.getItem('thumbstatus3840210') === 'up') {
thumbsup();
}
else if (localStorage.getItem('thumbstatus3840210') === 'down') {
thumbsdown();
}
}
Loadthumbs();
$("#thumbsup").click(function() {
thumbsup();
});
$("#thumbsdown").click(function() {
thumbsdown();
});
});
OR:
$(document).ready(function () {
function Loadthumbs() {
if (localStorage.getItem('thumbstatus3840210') === 'up') {
thumbsup();
}
else if (localStorage.getItem('thumbstatus3840210') === 'down') {
thumbsdown();
}
}
Loadthumbs();
$("#thumbsup").click(function () {
$(this).removeClass("btn-default").addClass("btn-success");
$("#thumbsdown").removeClass("btn-danger").addClass("btn-default");
localStorage.setItem('thumbstatus3840210', 'up');
});
$("#thumbsdown").click(function () {
$(this).removeClass("btn-default").addClass("btn-success");
$("#thumbsup").removeClass("btn-danger").addClass("btn-default");
localStorage.setItem('thumbstatus3840210', 'down');
});
});

Why can't javascript/jquery-feature be applied to multiple nodes?

I have a small javascript that changes the title of a input-field to it's value and some other stuff:
function autoFill(id){
if(jQuery(id).val()==""){
jQuery(id).val(jQuery(id).attr("title"))
.addClass("help");
};
jQuery(id).focus(function(){
if(jQuery(this).val()==jQuery(this).attr("title")){
jQuery(this).val("").removeClass("help");
}
})
.blur(function(){
if(jQuery(this).val()==""){
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
jQuery(".trip").submit(function(){
if(jQuery(id).val() == jQuery(id).attr("title")){
jQuery(id).val('');
}
});
}
When I try to use this script on a class that is on several nodes on one page it only works on the first. For example:
autoFill(".field");
Now I have to make it like this instead:
autoFill("#driver_from");
autoFill("#driver_to");
autoFill("#driver_when");
autoFill("#passenger_from");
autoFill("#passenger_to");
autoFill("#passenger_when");
how do I make it so that it works on every field instead?

Something like this would work:
function autoFill(selector){
jQuery(selector).each(function() {
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
};
jQuery(".trip").submit(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val('');
}
});
}).focus(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val("").removeClass("help");
}
}).blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
}
The important part is the .val() check at the beginning, it's getting the .val() of the first match, you need to handle each separately.
Or, rewrite it as a plugin like this:
(function($) {
$.fn.autoFill = function() {
return this.each(function() {
$(".trip").submit(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val('');
}
});
}).focus(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val("").removeClass("help");
}
}).blur(function(){
if($(this).val() == "") {
$(this).val($(this).attr("title")).addClass("help");
}
}).blur();
};
})(jQuery);
Then you can call it like this:
$(".field").autoFill();