CODEWITHSUNDEEP
jquerycss
jsc
jsc

Reputation: 23

jQuery toggle and add individual icons

I have a problem using a toggle to show/hide a div. The div which should be hidden is named "legend" and I have another div called "legend-closebutton" which has an onclick to hide/show the legend. The code looks like this:

<div class="legend-closebutton" onclick="$('#legend').toggle();">
</div>

I have the following css:

    .legend-closebutton{
   position: absolute;
   right: 10px;
   top: 190px;
   z-index: 3;
   width: 25px;
   height: 25px;
   cursor: pointer;
   background-color: rgba(255, 255, 255, 1);
   color: #000000;
   border-radius: 2px;
} 
.legend-closebutton:before {
  content: 'x';
  font-size: 12px;
  color: black;
  font-weight:bold;
  text-align: center;
  display: block;
  font-size: 12px;
  line-height: 25px;
  font-family: "HelveticaNeue", "Helvetica";
}

Everything works fine, but how can I use two different contents, instead of the "x"? I can use

content: url("mypicture1.png");

in the css, so I walkways see this picture instead of the "x". But what do I need to do, if I want to use for example the "x" if legend is opened (and on click closed) and "picture1" if legend is closed and should be opened on click?

I am looking forward to a hint! jsc
enter image description here

Upvotes: 0

Views: 60

Answers (1)

Uzbekjon
Uzbekjon

Reputation: 11813

You can toggle CSS class on .legend for example hidden and add new CSS rules:

<div class="legend-closebutton" onclick="$('#legend').toggle().toggleClass('hidden');">
</div>

Add CSS rules:

.hidden .legend-closebutton:before {
  content: url("mypicture1.png");
}

Also, I would suggest moving onclick to your javascript block/file:

$('.legend-closebutton').on('click', function(){
  $('#legend').toggle().toggleClass('hidden');
});

Upvotes: 1

Related Questions