Develop Reference

Change image onclick

I want to display a different image when clicking on my image. A demo is here. When clicking on the image the image should change to an arrow pointing up instead of pointing down. How do I do that?
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<div id="flip"><img src="http://i.imgur.com/YCf5zYt.png"></div>
<div id="panel" style="display: none;"><p><i><strong>CONTENT</strong></i></p>
</div>
</td>
JS
var toggled = false;
$("img").click(function () {
if (!toggled) {
$(this).css("", "url(http://i.imgur.com/YCf5zYt.png)");
toggled = true;
} else {
$(this).css("", "url(http://i.imgur.com/V4fKMWS.png)");
toggled = false;
}
$("p").slideToggle();
})
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideToggle("slow");
});
});

Here's another solution with toggleClass() and attr() function :
See this fiddle
$(document).ready(function () {
$("img").click(function () {
$(this).toggleClass('active');
if($(this).hasClass('active')){
$(this).attr("src","http://i.imgur.com/V4fKMWS.png");
} else {
$(this).attr("src","http://i.imgur.com/YCf5zYt.png");
}
$("#panel").slideToggle();
});
});

There are a couple of issues with the code:
First of all, you have to attach all of the event handlers from within the document ready callback. As it stands right now, it is possible that event handler is not attached because image tag may be not yet loaded when you try to attach the handler.
You also have to modify the src attribute of the image, not the css's url style:
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");

you can change the attribue src.
if (!toggled) {
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
toggled = true;
} else {
$(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
toggled = false;
}
Refer link: https://jsfiddle.net/sj7o9x58/2/

there a mistakes in your code try this
var toggled = false;
$("img").click(function () {
if (!toggled) {
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
toggled = true;
} else {
$(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
toggled = false;
}
$("p").slideToggle();
});

Try to write all your code in $(document).ready(); And you have a big mistake.
You should use .slideToggle() for $("#panel"). And this is easier way to do it(without any variables):
$(document).ready(function(){
$("#flip").click(function(){
if($("#panel").css("display") === "none"){
$("#panel").slideToggle().css("display", "block");
$("img").attr("src", "http://i.imgur.com/V4fKMWS.png");
} else if($("#panel").css("display") === "block"){
$("#panel").slideToggle();
$("img").attr("src", "http://i.imgur.com/YCf5zYt.png");
}
});
});
And demo is here

$(document).ready(function () {
var toggled = true;
$("img").on('click',function () {
if (!toggled) {
$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
toggled = true;
} else {
$(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
toggled = false;
}
$("#panel").slideToggle("slow");
});
});
The updated fiddle: https://jsfiddle.net/sj7o9x58/3/
I don't know if that's the image behavior you want, if it's the oposite just change te toggled initialization to false and the image by default on the src (html).

Need to toggle CSS slide-in function with click on different div?

I have this JSfiddle and i need to slide in, when clicking on a div, and not when page is loaded. Simultaneously it should be possible to close by clicking anywhere outside the slide-in box.
$( document ).ready(function() {
$(function(){
$(".slide-in").addClass("active");
console.log($(".slide-in"));
});
});
I think the solution could be some kind of toggle system, but i can't figure out how to?
Thank you!

Opens the slider on click of .button. Closes it on click anywhere outside the slider (including the button)
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.className=='slide-in') {
$(".slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.className=='button'){
$(".slide-in").addClass("active");
isOpened = true;
}
});
Better is to use IDs. So your code would be:
<div id="slide-in"></div>
<div id="button"></div>
and the javascript:
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.id!='slide-in') {
$("#slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.id=='button'){
$("#slide-in").addClass("active");
isOpened = true;
}
});
You'll also need to change the CSS from classes to IDs

Try this.
var someDiv = document.getElementById('yourDiv');
someDiv.style.cursor = 'pointer';
someDiv.onclick = function() {
//do something
}
how to make div click-able?

https://jsfiddle.net/zer00ne/jne1rasb/
$(document).ready(function() {
$('.button').on('click dblclick', function(e) {
$('.slide-in').toggleClass('active');
e.stopPropagation();
});
$(document).on('click', function() {
$(".slide-in").removeClass("active");
});
});

I think this should do the trick.
Edit:
$( document ).ready(function() {
$(".button").on("click",function(){
if($(".slide-in").hasClass("active")){
$(".slide-in").removeClass("active");
}else{
$(".slide-in").addClass("active");
}
});
});

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);
}
});
});
});

Change link text while div expands

I have a div that expands once you click on a link; my issue, is I want to change the text while the div expands so that the link says "hide form". Can somebody please help me? I'm still new to jQuery..
The link to the page is here: http://biggz.co
Here's the jQuery I'm currently using:
$(document).ready(function()
{
jQuery('a.contactForm').click(function() {
jQuery('#contactForm').slideToggle('slow', function() {
// Animation complete.
});
});
});

jQuery('#contactForm').slideToggle('slow', function () {
var txt = ($(this).css('display') == 'none') ? 'contact us directly':'Hide Form';
$('.contactForm').text(txt);
});

$(document).ready(function()
{
jQuery('a.contactForm').click(function() {
jQuery('#contactForm').slideToggle('slow');
$(this).text($(this).text() == 'Show' ? 'Hide' : 'Show');
});
});

Make use of text(). Like
jQuery('a.contactForm').text('Hide Form');
So your code can be
jQuery('a.contactForm').click(function() {
var text= $(this).text();
if (text == 'Show Form')
$(this).text('Hide From');
else
$(this).text('Show Form');
jQuery('#contactForm').slideToggle('slow', function() {
// Animation complete.
});
});

Toggle show/hidden with jquery

I need to use jquery to toggle two elements to show/hide. I want the button to say "hide text" and change to "show text" when it is clicked and of course I want the text to toggle from show to hide as the button is clicked. I have this to change it one time but I do not know how to change it back or make it toggle.
$(function() {
$('button#1').click(function() {
$('#one').fadeOut();
});
$('button#1').click(function() {
$('button#1').html('Show Text');
});
});

http://jsfiddle.net/fwdzm/1/
Use the toggle callbacks !
$(function() {
var $btn1 = $('button#1').click(function() {
$('#one').toggle('slow', function () {
if ($(this).is(':visible')) {
$btn1.html('Hide Text');
} else {
$btn1.html('Show Text');
}
});
});
});

$('button#1').click(function() {
var $btn = $(this);
$('#one').toggle('slow', function() {
if ($(this).is(':visible')) {
$btn.text('Hide');
} else {
$btn.text('Show Text');
}
});
});

Try something like this
$(function() {
$('button#1').click(function(){
if ($('#one').is(':visible')) {
$('#one').fadeOut();
$(this).html('Show Text');
} else {
$('#one').fadeIn();
$(this).html('Hide Text');
}
});
});

Save the current state in a variable and then based on that variable you either show or hide your elements and change the text on the button.
HTML
<button id="toggleBtn" type="button">Hide Text</button>
<span id="element">Your text is here</span>
JAVASCRIPT
var status = "shown";
function toggleElement() {
if (status == "shown") {
$('#element').hide();
$("#toggleBtn").html('Show Text');
status = "hidden";
} else {
$('#element').show();
$("#toggleBtn").html('Hide Text');
status = "shown";
}
}