Issue with revealing content in a block on "click" of another block

Hello,

I'm attempting to use pure CSS to achieve a behavior where content inside one block (#block-49e9f758ded715aef454) is revealed when another adjacent block (#block-5ab6c6262d56980c7e89) is "clicked". I've explored several methods, but I'm still facing issues.

Here's what I've tried so far:

Hover with Adjacent Sibling Selector: I initially tried using the :hover pseudo-class in combination with the adjacent sibling selector (+). However, I wanted an effect that behaves more like a "click" rather than a hover.

Active with Adjacent Sibling Selector: I also experimented with the :active pseudo-class. This didn't work for the desired effect.

Animations: I attempted to use keyframes and animations to simulate a click-like behavior on hover. The idea was to make it feel like a press-and-hold action, but this didn't reveal the content in the second block as intended.

Focus Pseudo-Class: My most recent attempt used the :focus pseudo-class, which seemed promising since it can mimic a click behavior. The relevant CSS for this method is:
 

/* Initially, hide the text in the second block */
#block-49e9f758ded715aef454 {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Allow the first block to be focusable */
#block-5ab6c6262d56980c7e89 {
    outline: none;  /* Removes the default focus outline */
    cursor: pointer; /* Indicates clickable element */
}

/* Show the text in the second block when the first block is focused */
#block-5ab6c6262d56980c7e89:focus + #block-49e9f758ded715aef454 {
    visibility: visible;
    opacity: 1;
}

However, even with this method, when I "click" on #block-5ab6c6262d56980c7e89, the content inside #block-49e9f758ded715aef454 isn't being revealed.

If anyone has suggestions, alternative solutions, or insights on what I might be overlooking, I'd greatly appreciate the help!

Thank you!
Alex

Hi,

What is page url? We can check easier

Hi,

Thank you for your response. My apologies for somehow missing it earlier.

https://sh.consulting/email-security
Password: AAA!!!

There's a section titled "They Can". The idea is to make when someone hovers over (or clicks) the text in the blue area that resembles a button (e.g., "MITM Attack"), an explanation appears adjacent to this block (for instance, "MITM Attack explained").

Already not sure if possible to implement w/o a custom script... 

Thank you!
Alex

CSS can't handle click behavior.

Script (JS) can handle both hover + click, but with hover, usually use CSS

You mean hover/click left arrow box >> show right arrow box?

Quote

 

Yes, exactly! To be more specific, hover over the 'MITM Attack' block to reveal the block on the right. Similarly, in the block below, hover over the 'DNS Hijacking' block to reveal the block on the left, and so on.

However, the revealing function doesn't work when hovering. I can hide text in the right block, but it doesn't get revealed when I hover over the 'MITM Attack' block.

Do you have any idea why it's not revealing?

Thank you!!!

(This code for MITM Attract, if it works, I will send code for other blocks)

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('div#block-5ab6c6262d56980c7e89').hover(function(){
    $('.fe-block-49e9f758ded715aef454').addClass('show');
}, function(){
   $('.fe-block-49e9f758ded715aef454').removeClass('show');
  });
});
</script>
<style>
.show {
    opacity: 1 !important;
}

.fe-block-49e9f758ded715aef454 {
    opacity: 0;
}
</style>

Explain:

the opacity: 0 will make right text block hidden in initial

script code will add a class with name "show" when users hover on MITM Attrack button

Because .show class has value opacity: 0 so it will make right text block visible

Thanks!! But is there a chance to make this work using CSS only, with no JS?

Thank you!!!!

Hello,

I just implemented this code and it worked great, for some reason once I adjusted the mobile view, the hover is no longer working back on the desktop view.

I added a stroke around the text you hover on, and also added a transiton. this was all working perfectly but after adjusting the layout on mobile view, the hover function does not work on desktop.

Any help would be greatly appreciated,

Thank you

code is here:

@media screen and (min-width: 768px)
{

/* Low Back */

.fe-block-yui_3_17_2_1_1700095381282_3268:hover ~ .fe-block-b57fffccfe922c25e72b {
    opacity: 1 !important;
}

.fe-block-b57fffccfe922c25e72b{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700095381282_3268:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;
}

/* Shoulder Pain */

.fe-block-yui_3_17_2_1_1700096368272_2834:hover ~ .fe-block-yui_3_17_2_1_1700096368272_4622 {
    opacity: 1 !important;
}

.fe-block-yui_3_17_2_1_1700096368272_4622{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700096368272_2834:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;
}

/* Neck Pain*/

.fe-block-yui_3_17_2_1_1700096368272_8515:hover ~ .fe-block-yui_3_17_2_1_1700096368272_10092 {
    opacity: 1 !important;
}

.fe-block-yui_3_17_2_1_1700096368272_10092{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700096368272_8515:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;
}

/* Pre and Post*/

.fe-block-yui_3_17_2_1_1700096368272_12903:hover ~ .fe-block-yui_3_17_2_1_1700096368272_15182 {
    opacity: 1 !important;
}

.fe-block-yui_3_17_2_1_1700096368272_15182{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700096368272_12903:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;
}

/* Running*/

.fe-block-yui_3_17_2_1_1700097636397_2853:hover ~ .fe-block-yui_3_17_2_1_1700097636397_5162 {
    opacity: 1 !important;
}

.fe-block-yui_3_17_2_1_1700097636397_5162{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700097636397_2853:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;

}
}

On 11/16/2023 at 8:54 AM, DECKDigitalSolutions said:

Hello,

I just implemented this code and it worked great, for some reason once I adjusted the mobile view, the hover is no longer working back on the desktop view.

I added a stroke around the text you hover on, and also added a transiton. this was all working perfectly but after adjusting the layout on mobile view, the hover function does not work on desktop.

Any help would be greatly appreciated,

Thank you

 

code is here:

@media screen and (min-width: 768px)
{

/* Low Back */

.fe-block-yui_3_17_2_1_1700095381282_3268:hover ~ .fe-block-b57fffccfe922c25e72b {
    opacity: 1 !important;
}

.fe-block-b57fffccfe922c25e72b{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700095381282_3268:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;
}

/* Shoulder Pain */

.fe-block-yui_3_17_2_1_1700096368272_2834:hover ~ .fe-block-yui_3_17_2_1_1700096368272_4622 {
    opacity: 1 !important;
}

.fe-block-yui_3_17_2_1_1700096368272_4622{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700096368272_2834:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;
}

/* Neck Pain*/

.fe-block-yui_3_17_2_1_1700096368272_8515:hover ~ .fe-block-yui_3_17_2_1_1700096368272_10092 {
    opacity: 1 !important;
}

.fe-block-yui_3_17_2_1_1700096368272_10092{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700096368272_8515:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;
}

/* Pre and Post*/

.fe-block-yui_3_17_2_1_1700096368272_12903:hover ~ .fe-block-yui_3_17_2_1_1700096368272_15182 {
    opacity: 1 !important;
}

.fe-block-yui_3_17_2_1_1700096368272_15182{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700096368272_12903:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;
}

/* Running*/

.fe-block-yui_3_17_2_1_1700097636397_2853:hover ~ .fe-block-yui_3_17_2_1_1700097636397_5162 {
    opacity: 1 !important;
}

.fe-block-yui_3_17_2_1_1700097636397_5162{
    opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
}

#block-yui_3_17_2_1_1700097636397_2853:hover h4 {
color: #ffffff !important;
  -webkit-text-stroke: 0.5px #7D5F50;
  transition: 0.3s !important;

}
}

 

What is page url?

Hello,

site url: https://sunnysidephysio.squarespace.com/

password: sunny

The section is towards the bottom of the homepage.

Thank you

On 11/21/2023 at 8:37 AM, DECKDigitalSolutions said:

Hello,

site url: https://sunnysidephysio.squarespace.com/

password: sunny

 

The section is towards the bottom of the homepage.

Thank you

I see this only

You mean hover on #heading1 will show body1 text

hover #heading2 >> show body 2

..?

On 11/24/2023 at 1:36 PM, tuanphan said:

I see this only

You mean hover on #heading1 will show body1 text

hover #heading2 >> show body 2

..?

Hey, this is from the other forum request I made, I was trying to do the same thing across both and you answered that for me. 

Thanks so much!