Change image by clicking, when clicking again return to initial image

Asked

Viewed 774 times

2

I need to change the icon every time I click and keep that other icon until I click again, then it goes back to the initial icon. How do I do this? Below is the code I’m using to create this menu. The section that calls the icon is <span class="icon-full"></span>

<nav class="navbar navbar-fixed-left navbar-minimal animate open"
		role="navigation">
		<div class="navbar-toggler animate">
			<span class="menu-icon"></span>
		</div>
		<ul class="navbar-menu animate">
			<li><a href="#" class="animate">
                 <span class="desc animate"> Tela Cheia</span>
                 <span class="icon-full"></span>
            </li>
			</a>
		</ul>
	</nav>

javascript html jquery css

  • when you say "keep that other icon until you click again" keep it for how long ? do you want to cache it? or just while the page is open?

  • @Leonardobonetti So it is a menu, which is being assembled with a list. I want when you click the "button" the icon(image) to change to another image. I just want the person to be able to notice that there was an action on that button. For example: the button comes with a blue icon, when I click this button with blue icon(image), it changes to a red icon(image), then if I click again, it goes back to blue icon(image). I was able to explain?

  • Your HTML is a little weird, where is the button to click?

  • @Leandro o <li> is playing the role of the "button"

1 answer

2


Isa made this very simple template just so you understand the dynamics. All in CSS

But I had to trade your two <span> for <input> and a <label> using ::before So you can click on the text or image and toggle the image. The rest of the formatting you do in the CSS of <label>

See working on Snippet

html, body {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 0;
}
label {
    cursor: pointer;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"] + label::before {
    content: url(http://placeskull.com/40/40)
}
input[type="checkbox"]:checked + label::before {
    content: url(http://placecage.com/40/40)
}
<nav class="navbar navbar-fixed-left navbar-minimal animate open" role="navigation">
  <div class="navbar-toggler animate">
    <span class="menu-icon"></span>
  </div>
  <ul class="navbar-menu animate">
    <li>
      <a href="#" class="animate">
        <input type="checkbox" id="teste">
        <label class="desc animate" for="teste">Tela Cheia</label>
    </li>
    </a>
  </ul>
</nav>

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.