Change image when clicking, when you click again return the initial image

Question

Change image when clicking, when you click again return the initial image

Navigation

#1 by (2 votes)

2

I need to change the icon every time I click and hold that other icon until clicking again, then it goes back to the initial icon. How to do this? Below is the code I am using to create this menu. The part 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

asked by anonymous 26.01.2018 / 15:01

1 answer

Creation of a Header that is used in the communication of a WebApi Error generating calendar in C

score 2 · Accepted Answer

Isa made this model very simple just so you can understand the dynamics. Everything in CSS

But I had to change its two <span> by <input> and a <label> using ::before so you can click on the text or image inclusive and change 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>