Is it possible to control two div styles with one button?

HTML & CSS
1

Instead of having 2 buttons to perform an action, only 1? I have no idea if this is possible or not. I tried using id tags but that didn’t work.

<div style="width:0;" onclick="myObject=document.getElementById('myObj'); 
myObject.style.display='block'; this.style.display='none'">

<div style="margin:0 0 -24px;width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #000000 83px,#0059dd 83px, #0059dd 86px,  #000000 86px,  #000000 174px, #0059dd 174px, #0059dd 177px,  #000000 177px  );border: 3px solid #0059dd;"></div>

<button style="display:block; border:none;cursor: pointer;background-color:transparent;width:266px;height:24px; " onclick="document.getElementById('player');player.paused ? player.play() : player.pause()"></button>
</div>

<div id="myObj" style="display: none;">

<div style="width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  );border: 3px solid #0059dd;"></div>

</div>

<audio id="player" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
2

You can only use each unique id once on a web page - using one on two or more elements is invalid HTML and is likely to either cause problems, or just not work as you’ve discovered.

To apply either CSS or JavaScript to more than one HTML element, you need to use the class attribute. A single class attribute could be used dozens or even hundreds of times on the same page, and still be valid.

2 Likes
3

Your question seems to be a continuation of this topic:

If you’ve read the replies to that, you’ll know you were told it can’t be done with CSS and you will need JavaScript, so if this is the same issue, you should request this thread be moved to the JS forum.

It has already been explained to you (more than once, I’m sure) that you cannot control behaviour with CSS.

2 Likes
4

It is unclear what you mean so you will need to clarify with examples.

What are you trying to change when the button is clicked?

Where is the example where you have 2 buttons doing the actions so we can see what you want?

You really must be clear in what you ask.

5 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.