Change image onclick

Change image onclick - javascript

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).

Related

Why my `onclick` doesn't work despite others things works?

So I'm using some parts of gentelella and there is a file custom.js. I have some problems with this file because some parts works and other don't.
The problem is with this method:
$(document).ready(function() {
console.log("custom.js inside document ready");
$('.collapse-link').on('click', function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$('.close-link').click(function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
It write "custom.js inside document ready" but when I click nothing happened.
And if I look into the HTML I have the same classes as in the JS:

it might be that on document ready these specific elements are not found.
In general a best practice is to delegate the events to the document, like this:
$(document).ready(function() {
console.log("custom.js inside document ready");
$(document).on('click', '.collapse-link' /* <--- notice this */, function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$(document).on('click', '.close-link' /* <--- notice this */, function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});

You have written the click event on the a tag. In general functional specific tags like submit button, a tag will do their default functionality on click. So as it is anchor it will check for href which is not there so the it is not redirecting to anywhere. We can supress the default behaviour of these kinds using e.preventDefault(). Here e is the event. So change your function to
$('.collapse-link').on('click', function(e) {
e.preventDefault();
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
And
$('.close-link').on('click', function(e) {
e.preventDefault();
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});

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

Add hide parameter to script

hi I currently have the following script and I'm trying to add a show and hide feature to it instead of just having one hide and show it. essentially "click me" shows it and the button hides it, fiddle example
http://jsfiddle.net/9M99G/
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
});

Just do the same with the .below div and slideToggle it with $(this) :
$('.below').on('click', function(){
$(this).slideToggle();
});
demo jsFiddle
See more about slideToggle()

Use slideToggle
$('.below').on('click', function(){
$(this).slideToggle();
});
That will switch display state; if hidden it will show, if shown it will be hidden

If you want just the hide functionality for the button , this code will do
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
$('.below').on('click', function(){
$(this).slideToggle();
});
});
Demo fiddle : http://jsfiddle.net/9M99G/4/
Or if you want to hide the Click Me while the hide button is being displayed the code below does exactly that
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).hide();
$('.below').show();
return false;
});
$('.below').on('click', function () {
$(this).hide();
$('.toggleBtn').show();
return false;
});
});
Demo fiddle : http://jsfiddle.net/9M99G/6/

DEMO
Try this, use slideDown and slideUp
$(document).ready(function () {
$('.below').hide();
$('.toggleBtn').click(function () {
$(this).next('.below').slideDown('slow');
return false;
});
$('.below button').click(function () {
$(".below").slideUp('slow');
});
});

Develop Reference

JavaScript is the programming language of the Web.

Change image onclick - javascript

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

Related

Why my `onclick` doesn't work despite others things works?

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

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

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

Add hide parameter to script

Categories

Resources