CoopDaddio CoopDaddio - 3 months ago 6x
CSS Question

.click( swap ) stops working when specific src given?

I have a drop down menu, and I would like the image that is used to show the drop down menu to toggle depending on whether the drop down menu is open or closed... this works fine. However, I would like the image to return to its original src (..images/image1.png) when the rest of the page is clicked. This also works fine, however, the image's src doesn't toggle when it is clicked after the page is clicked. How do I fix this? Thankyou.

$(function() {

function swap() {
var mem = this.src;
this.src = $(this).data('src');
$(this).data('src', mem);


window.onclick = function(event) {
if (!'.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
$(".dropbtn").attr('src', '../images/image1.png');

<div class="dropdown">
<div id="infotoggler">
<img onclick="myFunction()" src="../images/image1.png" data-src="../images/image2.png" class="dropbtn" />
<div id="myDropdown" class="dropdown-content">
<a href="">Home</a>
<a href="">Portfolio</a>
<a href="">Contact</a>
<a href="">Downloads</a>


You are setting here the image src on click, while swap should be the one to do so, setting it this way possibly overrides the other src and then the src and data-src would be the same.

$(".dropbtn").attr('src', '../images/image1.png');

Possible solution for this, is to swap again:

var t = $(".dropbtn");
var mem = t.attr('src');
t.attr('src','src'));'src', mem);