how to make element appear when seperate button is focused

Question

#desc {
    visibility: hidden;
    opacity: 0;
}

.exp-container > .buttons:has(.button:focus) + #desc {
    opacity: 1;
    transition: 0.5s;
}

.exp-container > .buttons:has(#OMI:focus) + #desc > .top > h1:before {
    visibility: visible;
    transition: 0.5s;
    content: "Graphic Design Lead";
}

.exp-container > .buttons:has(#OMI:focus) + #desc > .top > .date:before {
    visibility: visible;
    transition: 0.5s;
    content: "July 2021 - July 2022";
}

.exp-container > .buttons:has(#OMI:focus) + #desc > .content > .exp::before {
    visibility: visible;
    transition: 0.5s;
    content: "- Developing screens and UI components for the web application using React and Tailwind. - Fixing UI issues and integrating backend APIs with Redux Saga.";
}

.exp-container > .buttons:has(#OMI:focus) + #desc > .content > .comp::before {
    visibility: visible;
    transition: 0.5s;
    content: "Remote";
}

<div class="exp-container">
    <div class="title">
        EXPERIENCE
    </div>

    <div class="buttons">
        <button class="button" id="OMI"><span>ONE</span></button>
        <button class="button" id="RC"><span>TWO</span></button>
        <button class="button" id="MRKT"><span>THREE</span></button>
        <button class="button" id="BIBLE"><span>FOUR</span></button>
        <button class="button" id="FREE"><span>FIVE</span></button>
        <button class="button" id="CHAR"><span>SIX</span></button>
    </div>

    <div id="desc">
        <div class="top">
            <h1>Placeholder Text <span class="date">Month 2022 - Month 2022</span></h1>
        </div>

        <div class="content">
            <div class="comp">Placeholder Text</div>
            <div class="exp">Placeholder Text<br>Placeholder Text<br>Placeholder Text</div>
        </div>
    </div>
</div>

I made some changes that included trying :has(), but my issue is now that I want to align these buttons so they evenly fit inside in the fluid background.

Doing so requires the buttons to be in a seperate div from the content so I am able to make the buttons flex (as far as I know).

Is this possible in just CSS or do I have to include js?

The `+` and `~` combinators are used for siblings. The `.button` elements only have `.button` elements as siblings. You'd have to take them out of the `.buttons` div. — davidleininger, Nov 15 '22 at 19:55

score 0 · Accepted Answer · answered Nov 15 '22 at 20:00

In your scenario (Only CSS), to make this work, you'll need two things,

flatten the buttons elements - That means removing the .buttons container

Or use :has() selector instead .exp-container > .buttons:has(.button):hover ~ #desc-container

remove the :after tag in the css #desc-container:after -> #desc-container

In that way you can specify in your css each button to show what context

See also: This answer

see example:

#desc-container {
    width: 100%;
    display: none;
}

.exp-container > .button:hover ~ #desc-container {
    display: block;
}

<div class="exp-container">
        <div class="title">
            TITLE
        </div>

            <button class="button">
                <span>ONE</span>
            </button>
            <button class="button">
                <span>TWO</span>
            </button>
            <button class="button">
                <span>THREE</span>
            </button>
            <button class="button">
                <span>FOUR</span>
            </button>
            <button class="button">
                <span>FIVE
            </button>
            <button class="button">
                <span>SIX</span>
            </button>

        <div id="desc-container">
            <div class="top">
                <h1>TITLE <span class="date">July 2021 - July 2022</span></h1>
            </div>

            <div class="content">
                <div class="comp">EXAMPLE</div>
                <div class="exp">
                    EXAMPLE
                </div>
            </div>
        </div>
   </div>

what would the example using :has() look like? – nic Nov 16 '22 at 00:55 — nic, Nov 16 '22 at 00:55

score 0 · Answer 2 · answered Nov 15 '22 at 20:04

I am not sure if it's 100% possible with CSS. You can use little bit of JavaScript like that:

const buttons = document.querySelectorAll('.button');
const container = documetn.querySlector('#desc-container');

function handleHover(e) {
   const elementId = e.id;

   switch (elementId) {
      case '1':
         container.innerHTML = 'Some text on hover 1. el';
      case '2':
         container.innerHTML = 'Some text on hover 2. el';
      case '3':
         container.innerHTML = 'Some text on hover 3. el';
      default:
         return;
   }
}


buttons.forEach((element) => {
   element.addEventListener('mouseover', handleHover);
})

and in HTML you need to add id to each button

score 0 · Answer 3 · answered Nov 15 '22 at 20:10

Let’s not forget about :has! This is totally possible with css only! But check out browser compatibility, pretty wide nowadays tho!

https://caniuse.com/css-has

.buttons:has(.button:hover) ~ #desc-container{
 display:block !important;
}


#desc-container {
    width: 100%;
    display: none;
}

<div class="buttons">
            <button class="button">
                <span>ONE</span>
            </button>
            <button class="button">
                <span>TWO</span>
            </button>
            <button class="button">
                <span>THREE</span>
            </button>
            <button class="button">
                <span>FOUR</span>
            </button>
            <button class="button">
                <span>FIVE
            </button>
            <button class="button">
                <span>SIX</span>
            </button>
        </div>

        <div id="desc-container">
            
            <div class="top">
                <h1>TITLE <span class="date">July 2021 - July 2022</span></h1>
            </div>

            <div class="content">
                <div class="comp">EXAMPLE</div>
                <div class="exp">
                    EXAMPLE
                </div>
            </div>
        </div>

how to make element appear when seperate button is focused

3 Answers3