How to click on a button and click on it again to close all the content AND how to change image when-CodePudding

(I will link a code sandbox with all my code (at its latest) to be viewed if you want to) https://codesandbox.io/s/distracted-hellman-pyej06?file=/index.html

I have two issues that I was hoping to address

Problem-1: I have a website called dirieahmed. ml (the same as the code sandbox) I have a night mode / light mode toggle, however when I click on night mode my logo (the image which is called hello.jpg and is above the face picture) will stay the same which makes sense but looks terrible because it looks like an imperfect white square. As a result, I wanted to change this. Therefore when I click on night mode I want the image to change into the night mode version of the logo I have made (it will be called hello-dark.jpg) Is there a way i can do that? I will link the appropriate code down below but if you would like to see the CSS you can view the sandbox

<div >
    <img src="img/hello.jpg" alt="something" width="400" height="300">
   </div>

  <script async>
<--!This is my dark theme toggle-->    
    document.querySelector('.theme-toggle-button').addEventListener('click', () => {
      document.body.classList.toggle('dark')
    })

Problem-2: On my sandbox, you can view an About me, Education and Achievements and Other content elements, these elements are buttons when clicked they will drop down a content, if I click on about me then Education about me will open then close and allow Education to open. Pretty Normal and similarly for the button called "Other" but when i click on Other again to reset all the views and make it clean like when it was originally where no dropdowns exsisted that wont happen. Is there a way for me to make a javascript that will close all content from that div when clicked on it twice. (the code of CSS is in the sandbox but Html and JS will be here)

<div >
  <button id="one"  title="click me">About Me</button>
  <div >
    <h1 >Dummy text header</h1>
    <p >Dummy text</p>
  </div>
  <button  title="click me">Education and Achivements</button>
  <div >
    <p >Dummy text</p>
    <ul >
      <li>- Achivement #1</li>
      <li>- Achivement #2</li>
      <li>- Achivement #3</li>
    </ul>
  </div>
  <button  title="click me" >Other</button>
  <div >
    <h1 >Dummy text header</h1>
    <p >Dummy text</p>
  </div>
  <script async>
        // Instanciate List div's
        let list1 = document.querySelector(".list-1");
        let list2 = document.querySelector(".list-2");
        let list3 = document.querySelector(".list-3");

        // Reset's all views to the default without .newlist
        const resetAllViews = () => {
          list1.classList.remove("newlist");
          list2.classList.remove("newlist");
          list3.classList.remove("newlist");
        };

        // Checks to see what button is clicked and shows correct list based on input
      document.addEventListener(
        "click",
        function (e) {
          e = e || window.event;
          var target = e.target;
          if (target.classList.contains("one")) {
            resetAllViews();
            list1.classList.add("newlist");
          }
          if (target.classList.contains("two")) {
            resetAllViews();
            list2.classList.add("newlist");

          }
          if (target.classList.contains("three")) {
            resetAllViews();
            list3.classList.add("newlist");
          }
        
          
        }, false);
  </script>
</div>

Again you can view the result I have in the sandbox (latest) and on the most recent website dirieahmed.ml for real life view

Sorry if I repeated myself a lot and any help would be appreciated though I prefer if you can show me the code as a runner snippet as I am fairly new so its a bit difficult for me to understand all vocabulary but again any help is appreciated

CodePudding user response：

Here is an example of doing this using two elements where one is hidden based on theme. You could make it a photo that you want to change. This way both images are loaded and you don't have to have the client wait for an image to load when themes change.

The way I accomplished this was mainly in css. The only javascript is to toggle the dark class on the page. The dark page has css variables which represent whether or not elements on the page have a display of none or block. On the actual elements which toggle, I feed those css variables into them. It is also possible to add animations or transitions to make it feel fancy, but hopefully this small demonstration satisfies your need for modifications to your own project.

const $ = str => document.querySelector(str);
const page = $(".page");
$(".theme-toggle").addEventListener("click", () => {
  page.classList.toggle("dark");
});

body {
  display: grid;
  place-items: center;
}

.page {
  --light-logo: block;
  --dark-logo: none;
  
  display: flex;
  flex-direction: column;
  text-align: center;
}

.page.dark {
  --light-logo: none;
  --dark-logo: block;

  background-color: black;
  color: white;
}

.logo-container {
  font-size: 5rem;
}

.logo-container .dark {
  display: var(--dark-logo);
}

.logo-container .light {
  display: var(--light-logo);
}

<div >
  Hello World
  <div >
    <div >