skip to Main Content

I need to change visibilities of two texts, but I don’t want a toggle button, just one icon that – when clicked – hides text1 and shows text2, and returns back when clicked again.

I use:

<span onclick="document.getElementById('text1').innerHTML = (this.innerHTML == document.getElementById('text1').innerHTML) ? document.getElementById('text2').innerHTML : document.getElementById('text1').innerHTML"><i class="fa fa-comments" aria-hidden="true"></i></span>and

<div class="content">
  <div id="text1">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id="text2">
    <h1>Välkommen</h1>
    <p>Swedish text</p>
  </div>
</div>

Edit: Miguel G’s answer solves it. However, I still try to figure out how to have the text change in other sections across the entire page.

5

Answers


  1. Ok, I made a lot of changes in your code, I don’t know if this was exactly what you were expecting, but here it is.
    To achieve the desired behavior of showing the content corresponding to each text when the user clicks on its respective element, you will need to make some changes to the HTML code and add JavaScript.
    In this example, I’ve added code to toggle the display of text corresponding to the clicked button. If the text is visible, it will be hidden and vice versa. In addition, I added a loop to hide all texts except the text corresponding to the current button that was clicked. With these changes, you can click the buttons to show and hide the corresponding content.

    <style>
      .text {
        display: none;
      }
    </style>
    
    <!-- add a class to each button -->
    <span class="btn" data-target="#text1"><i class="fa fa-comments" aria-hidden="true"></i>English</span>
    <span class="btn" data-target="#text2"><i class="fa fa-comments" aria-hidden="true"></i>Swedish</span>
    
    <div class="content">
      <div id="text1" class="text">
        <h1>Welcome</h1>
      </div>
      <div id="text2" class="text">
        <h1>Välkommen</h1>
      </div>
    </div>
    
    <!-- JavaScript code -->
    <script>
      const buttons = document.querySelectorAll('.btn');
      const texts = document.querySelectorAll('.text');
    
      buttons.forEach(button => {
        let isTextVisible = false;
        button.addEventListener('click', () => {
          // Get button target
          const target = button.getAttribute('data-target');
          const text = document.querySelector(target);
          // Hides all texts except the current text
          texts.forEach(t => {
            if (t !== text) {
              t.style.display = 'none';
            }
          });
          // Shows or hides the text corresponding to the clicked button
          if (isTextVisible) {
            text.style.display = 'none';
            isTextVisible = false;
          } else {
            text.style.display = 'block';
            isTextVisible = true;
          }
        });
      });
    </script>
    
    Login or Signup to reply.
  2. EDIT:
    Okay I think I know what you are asking for. You want to be able to click a button or something to switch the inner HTML of these two divs.
    You can accomplish that as follows:

    <button type="button" onclick="toggle()">Click Me!</button
    <div class="content" style="display: inline;">
      <div id="text1">
        <h1>Welcome</h1>
        <p>English text</p>
      </div>
      <div id="text2" style="display: none;">
        <h1>Välkommen</h1>
        <p>Swedish text</p>
      </div>
    </div>
    

    For your HTML, you can put the onclick property directly into the top div, or you can put it in a separate button. That is up to you. For this one, I added a button on top of the div to allow you to toggle back and forth between the two options. I also put some initial styling in the divs to show whats happening.

      const toggle = () => {
      
        let el1 = document.getElementById("text1");
        let el2 = document.getElementById("text2");
    
        el1.style.display.includes('none') ? el1.style.display = 'inline' : el1.style.display = 'none';
        el2.style.display.includes('none') ? el2.style.display = 'inline' : el2.style.display = 'none';
      }
    

    This is the JavaScript function that will swap your divs. Basically now we are just inspecting the style of each div and if it’s visible, we make it invisible, and if it’s not visible, we make it visible. By using the none property, we assure that they will show up in the same spot.

    You can put this function inside a script tag and it should work! Let me know how it goes.

    Login or Signup to reply.
  3. I don’t know if this is correct, but i add this answer just in case.

    function onloadtext(){
        document.getElementById("text1").innerHTML = `<h1>Welcome</h1><p>English text</p>`;
    }
     const toggle = () => {
      let el1 = document.getElementById("text1");
      let btn = document.getElementById("toggle");
      if(btn.value == 'Swedish'){
        btn.value = 'English';
        el1.innerHTML = `<h1>Välkommen</h1><p>Swedish text</p>`;
      }else{
        btn.value = 'Swedish';
        el1.innerHTML = `<h1>Welcome</h1><p>English text</p>`;
      }
    }
    <body onload="onloadtext()">
     Translate in:<input type="button" id="toggle" onclick="toggle()" value="Swedish">
     <div class="content">
        <div id="text1"></div>
     </div>
    </body>
    Login or Signup to reply.
  4. I understand that instead of swapping the contents of text1 and text2, you want to hide one and make the other visible. I hope the code below helps.

    var text1=document.getElementById('text1');
    var text2=document.getElementById('text2');
    
    const swap = () => {
      if(text1.classList.contains("hidden")){ //if text1 contains class 'hidden'
        text1.classList.remove("hidden"); //remove hidden class from text1
        text2.classList.add("hidden"); //add hidden class to text2
      }
      else{
        text1.classList.add("hidden"); //add hidden class to text1
        text2.classList.remove("hidden"); //remove hidden class from text2
      }
    }
    .hidden{
      display:none;
    }
    <button onclick="swap()">Switch Text</button>
    
    <div class="content">
      <div id="text1">
        <h1>Welcome</h1>
        <p>English text</p>
      </div>
      <div id="text2" class="hidden">
        <h1>Välkommen</h1>
        <p>Swedish text</p>
      </div>
    </div>
    Login or Signup to reply.
  5. This should work.

    
    <div id="swap-button" style="cursor: pointer;">Click Me</div>
    
    <div class="content">
      <div id="text1">
        <h1>Welcome</h1>
        <p>English text</p>
      </div>
      <div id="text2">
        <h1>Välkommen</h1>
        <p>Swedish text</p>
      </div>
    </div>
    
    <script>
      const swapText = () => {
        const text1Element = document.getElementById('text1');
        const text2Element = document.getElementById('text2');
        const text1 = text1Element.innerHTML;
        text1Element.innerHTML = text2Element.innerHTML;
        text2Element.innerHTML = text1;
      };
    
      document.getElementById('swap-button').onclick = () => {
        swapText();
      };
    </script>
    
    

    Just add your icon instead of

    
    <div id="swap-button" style="cursor: pointer;">Click Me</div> 
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search