How can I use the grandchild of one element to toggle a class on the grandchild of a previous element?

Question

I've created a fiddle using the same html structure of a plugin I'm trying to edit. There are two 'grandparent' elements containing their ancestors, and I'm trying to use a button contained in one of them to toggle a class on an overlay contained in the other.

I've been trying various jQuery combinations, but so far nothing has worked. This is the one that I feel is most logical, can anyone point out where I'm going wrong?

It might be worth me mentioning that I don't have much flexibility in editing the html structure of the plugin, just the CSS and jQuery.

https://jsfiddle.net/71qdzr9j/4/

jQuery(document).ready(function($) {    
  
  $(".button").click(function() {
    $(this).parentsUntil(".lower-section").previous().find(".overlay").toggleClass("open");
  });
  
});

.wrapper {
  position:relative;
  top:0;
  float:left;
  display:inline-block;
  width:275px;
  background:pink;
  margin-right:24px;
}

.overlay {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  background-color: rgba(0,0,0,0.5) !important;
  opacity: 0 !important;
}

.overlay.open {
  opacity:1;
}

.lower-section {
  position:relative;
}

.button {
  position:absolute;
  display:block;
  top:0;
  right:0;
  background:orange;
}





  
    
      
      
    
  

  
    
      Autumn Trees
      Mist rolling in over the horizion.
      Button
    
  
  




  
    
      
      
    
  

  
    
      Ice patterns
      Detail of a frozen landscape.
      Button

user_13669048 · Answer

You are nearly there! You are not calling the right jQuery methods to toggle class open on. You need to use parents() and prev() method like this below:

jQuery(document).ready(function($) {    
  $(".button").click(function() {
    $(this).parents(".lower-section").prev().find(".overlay").toggleClass("open");
    });
});

In addition you do not need to important at all. jQuery toggle method will do the job for you.

Working Demo:

jQuery(document).ready(function($) {    
  $(".button").click(function() {
    $(this).parents(".lower-section").prev().find(".overlay").toggleClass("open");
    });
});

.wrapper {
  position: relative;
  top: 0;
  float: left;
  display: inline-block;
  width: 275px;
  background: pink;
  margin-right: 24px;
}

.overlay {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 0;
}

.overlay.open {
  opacity: 1;
}

.lower-section {
  position: relative;
}

.button {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  background: orange;
}




  
    
      
      
    
  

  
    
      Autumn Trees
      Mist rolling in over the horizion.
      Button
    
  
  




  
    
      
      
    
  

  
    
      Ice patterns
      Detail of a frozen landscape.
      Button
    
  
  





  
    
      
      
    
  

  
    
      Autumn Trees
      Mist rolling in over the horizion.
      Button

user_2275490 · Answer

You can use closest() in combination with find() to get to your class overlay:

  $(".button").click(function() {
    $(this).closest(".wrapper").find(".overlay").toggleClass("open");
  });

then you need to make sure, that the class "open" is actually executed, using !important

.wrapper .overlay.open {
  opacity:1 !important;
}

or,

in order to avoid use !important as last resource you can remove !important from your .overlay{ opacity: 0 ;}, then it's not needed to use !important in you .overlay.open anymore

see fiddle here: https://jsfiddle.net/8dq6Ljny/1/ with !important

https://jsfiddle.net/8dq6Ljny/2/ without !important

user_14087238 · Answer

Excited to post my first answer here :-)

Try not to use !important ever! It will cause a lot of mess especially if your code becomes larger. I made my code in vanilla Javascript. JQuery is almost the same logic but just different function names.

My code edit is based on my understanding that you need to change overlay opacity of one picture if you clicked a button under the other picture. However, if you wanted to change opacity of the same picture as the button, then just swap the overlays[1] and overlays[0] in the if {...} statements.

  document.addEventListener("click", function(e) {
    var titles = document.querySelectorAll(".title");
    var overlays = document.querySelectorAll(".overlay");

    var currentTitle = $(e.target).prev().prev().text();
    if (currentTitle === titles[0].innerText) {
      overlays[1].classList.toggle("open");
    }
    if (currentTitle === titles[1].innerText) {
      overlays[0].classList.toggle("open");
    }
  });

.wrapper {
  position: relative;
  top: 0;
  float: left;
  display: inline-block;
  width: 275px;
  background: pink;
  margin-right: 24px;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5) !important;
  opacity: 0;
}

.open {
  opacity: 1;
}

.lower-section {
  position: relative;
}

.button {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  background: orange;
}



  
    

    
    
    
  
  
    
    
      
        
          
          
        
      

      
        
          Autumn Trees
          Mist rolling in over the horizion.
          Button
        
      
    
    
    
      
        
          
          
        
      
      
        
          Ice patterns
          Detail of a frozen landscape.
          Button

user_1417085 · Answer

You're gonna kick yourself, but I think it's because your opacity:1 in .overlay is being overridden but the !important on the opacity:0 in .overlay.open.

How can I use the grandchild of one element to toggle a class on the grandchild of a previous element?

4 Answers