I am having 8 images overlapped one over other in `svg` file format. It resemble like tab menu bar.I have a tab for billing when that tab is active all other tab must be found behind and If I click another tab like employee that tab must be active and other tab must be inactive. I need to toggle between two images. Hence I tried out with this code.

```css
.gold1 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold2 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold3 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold4 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold5 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold6 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold7 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold8 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray2 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray3 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray4 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray5 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray6 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray7 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray8 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
```

```html
<script>
  jQuery("#infoToggler").click(function() {
        jQuery(this).find('img').toggle();
});
</script>
<img src="gray2.svg" class="gray2">
<img src="gray3.svg" class="gray3">
<img src="gray4.svg" class="gray4">
<img src="gray5.svg" class="gray5">
<img src="gray6.svg" class="gray6">
<img src="gray7.svg" class="gray7">
<img src="gray8.svg" class="gray8">
<div id="infoToggler">
  <img src="gold1.svg" class="gold1" />

  <img src="gray1.svg" class="gray1" style="display:none/>

</div>
```

Can someone help me code?