1

I am working in Wordpress with Visual Composer, and I have a toggle container. Essentially I click on each tab and the content below changes. I would like to assign a different image to each tab as a background, through css. I have achieved this however since each tab has the same class name (given to it by visual composer) the image is the same. I need to figure out how I can give each tab its own unique id, so that I can give each tab it's own background image - but since I can't edit the html directly, I think I need to do this with javascript. Does anyone know how I can achieve this? Here is the html code below:

<div class="vce-toggle-container-tab">
 <a class="vce-toggle-container-tab-title">Test 1</a>
</div>
<div class="vce-toggle-container-tab">
 <a class="vce-toggle-container-tab-title">Test 2</a>
</div>

And my css to add a background image:

a.vce-toggle-container-tab-title {
    background-image: url("https://katherinemade.com/staging/wp-content/uploads/2021/03/0I1A5234-3.jpg") !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 500px;
    height: 500px;
}

I hope I'm explaining this clearly. Please let me know if it's not understood and I will try again.

KatherineMichelle
  • 453
  • 10
  • 27
  • 2
    I think you may be looking for :nth-child(n) in CSS - no need for JS. – A Haworth Apr 11 '21 at 13:10
  • @AHaworth The approach would depend on if the tabs are dynamically rendered. If there are only 2 tabs ever, the :nth-child(n) approach will do the trick. – dillon Apr 11 '21 at 13:11
  • Not fimiliar with Wordpress with Visual Composer. Sounds like you wanna assign background images dynamically, using static CSS. That is crazy! You should rather change style attribute "background-image" dynamically for each element give it URL path, instead of inside the CSS file? – siggi_pop Apr 11 '21 at 13:13
  • What I want to do is make Test 1 and Test 2 each have a different background image. How would I do that with nth-child ?@AHaworth – KatherineMichelle Apr 11 '21 at 13:22
  • @siggi_pop I do not understand what you mean – KatherineMichelle Apr 11 '21 at 13:24
  • look at answer from @ElsonRamos – siggi_pop Apr 11 '21 at 13:38
  • @dillon See the answer from charlietfl - you can have more than 2 tabs.. – A Haworth Apr 11 '21 at 13:43

2 Answers2

3

You can do it with nth-child or nth-of-type selectors without any need for js as follows

a.vce-toggle-container-tab-title {
  background-position: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: 100px;
  height: 100px;
}

.vce-toggle-container-tab:nth-of-type(1) a.vce-toggle-container-tab-title {
  background-image: url("https://via.placeholder.com/150?text=one") !important;
}

.vce-toggle-container-tab:nth-of-type(2) a.vce-toggle-container-tab-title {
  background-image: url("https://via.placeholder.com/150/0000FF/808080?text=two") !important;
}

.vce-toggle-container-tab:nth-of-type(3) a.vce-toggle-container-tab-title {
  background-image: url("https://via.placeholder.com/150?text=THREE") !important;
}
<div class="vce-toggle-container-tab">
  <a class="vce-toggle-container-tab-title">Test 1</a>
</div>
<div class="vce-toggle-container-tab">
  <a class="vce-toggle-container-tab-title">Test 2</a>
</div>
<div class="vce-toggle-container-tab">
  <a class="vce-toggle-container-tab-title">Test 3</a>
</div>
charlietfl
  • 170,828
  • 13
  • 121
  • 150
0

I'm not familiar with Wordpress and I am not sure if you can add javascript, but if you can, the code below can help you if in the page only those divs has the class 'vce-toggle-container-tab':

const divs = document.querySelectorAll('.vce-toggle-container-tab');
    //first image
    divs[0].style.backgroundImage = "url('https://katherinemade.com/staging/wp-content/uploads/2021/03/0I1A5234-3.jpg')";
    //second image
    divs[1].style.backgroundImage = "url('https://katherinemade.com/staging/wp-content/uploads/2021/03/0I1A5234-3.jpg')";
Elson Ramos
  • 771
  • 4
  • 13