To summarise the code, I have buttons that display different tabs when pressed. Within the tabs, there are more buttons that change the color of some div elements and only one tab can be opened at a time. All this works as it should for the most part.

All buttons had been using focus but I wanted to replace it with javascript so that the selection will be retained when clicking on different elements. No tabs should be visible if the current opened tab button is pressed like it does when the code first runs.

I have had a few issues trying to get this to work properly. At the moment, the color buttons remain clicked. When tab toggles, the tab button loses selection and the tab div doesn't close when I click on the current selected tab's button.

https://jsfiddle.net/gkde169x/4/

        <button class="tabButton" onclick="toggle_tab('tabOne');">Tab One</button>
        <button class="tabButton" onclick="toggle_tab('tabTwo');">Tab Two</button>  

        <div id="tabOne" class="clickedTab" style="display: none;">
            <br><br>
            <div id="paletteOne">
                <button class="paletteButton" style="background-color: blue"></button> 
                <button class="paletteButton" style="background-color: red;"></button>
                <button class="paletteButton" style="background-color: yellow;"></button>
                <button class="paletteButton" style="background-color: Green;"></button>
                <button class="paletteButton" style="background-color: Orange;"></button>
                <button class="paletteButton" style="background-color: white;"></button>
            </div>
        </div>

        <div id="tabTwo" class="clickedTab" style="display: none;">
            <br><br>
            <div id="paletteTwo">
                <button class="paletteButton" style="background-color: blue"></button> 
                <button class="paletteButton" style="background-color: red;"></button>
                <button class="paletteButton" style="background-color: yellow;"></button>
                <button class="paletteButton" style="background-color: Green;"></button>
                <button class="paletteButton" style="background-color: Orange;"></button>
                <button class="paletteButton" style="background-color: white;"></button>
            </div>      
        </div>

        <div id="change1"></div>
        <div id="change2"></div>

        <script type="text/javascript">

            const divOne = document.getElementById('change1');
            const divTwo = document.getElementById('change2');

                document.querySelectorAll('#paletteOne button').forEach(function (el) {
                    el.addEventListener('click', function () {
                    divOne.style.backgroundColor = el.style.backgroundColor;
                    el.className = "paletteSelect";
                    });
                });

                document.querySelectorAll('#paletteTwo button').forEach(function (el) {
                    el.addEventListener('click', function () {
                    divTwo.style.backgroundColor = el.style.backgroundColor;
                    el.className = "paletteSelect";
                    });
                });

            function toggle_tab(id) {
                const target = document.getElementById(id);
                if (!target) {
                    return;
                }

                // Hide unselected tabs
                const tabs = document.querySelectorAll('.clickedTab');
                for (const tab of tabs) {
                    tab.style.display = 'none';
                }
                // Show current tab
                target.style.display = 'block';
            }

What's the best way to accommodate this in my code?

CodePudding user response：

to unclick the color button I would do something like this, (with each click check for clicked buttons and unclick)

    const pal = document.getElementById('paletteOne')
      pal.addEventListener('click', function(e) {
         document.querySelectorAll('#paletteOne button').forEach(function(el) {
            el.className = "paletteButton"});
            if(e.target.className==="paletteButton"){
               divOne.style.backgroundColor = e.target.style.backgroundColor;
               e.target.className = "paletteSelect";
            }
     });

to hide selected tab when clicked on

 const tabs = document.querySelectorAll('.clickedTab');
  for (const tab of tabs) {
  if(tab!== target || target.style.display === 'block'){
    tab.style.display = 'none';
  }else{    
    target.style.display = 'block';}
  }

obviously these things can be done differently, I'm just working off your code...

CodePudding user response：

In your javascript

function toggle_tab(id) {
  const target = document.getElementById(id);
  if (!target) {
    return;
  }
  const tabShown = document.querySelectorAll('.show')
  tabShown.forEach((tab) => {
    if(target != tab) tab.classList.remove('show')
  })
  target.classList.toggle('show');
}

Also in your CSS use classes. (You can create one class and give it to both of them since they have so many styles in common and use tabTwo and tabOne classes only for differences.)

.tabContainer {/*here use this class, give this to both tabs*/
    position: absolute;
    margin-top: 38px;
    height: 100px;
    width: 100px;
    padding-left: 50px;
    padding-bottom: 50px;
    border-style: solid;
    border-color: black;
    background: white;
    display:none;/*here*/
}

.tabTwo {/*here use class*/
    margin-left: 20px;
}
.show{
    display:block;
}