how to create hide/show toggle

Question

I have two flip cards with a hide/show toggle. but when I click the hide/show button on the second flipcard it doesn't work. How can I make it so that when the hide/show switch on the second flip card is clicked, it starts working. I hope you understand.

this is my flip cards



<div id="main">
        <div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">     
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
                                <button id='button' >hide/show</button>
                 <p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
         </div>
          <div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
                    
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
                               <button id='button' >hide/show</button>
                <p id="newpost" style="display: none;" > Test text</p>
<hr />              
</div>
</div>
</label>
          </div>
</div>

this is my script for hide/show button

<script>
var button = document.getElementById('button');

button.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};
</script>

i hope you can help me

I tried many options, but each had some kind of jamb. For example, I tried other scripts in one, the text was not shown at all, in the second option, when I pressed hide / show on the second flip card, it showed the text on the first flip card.

What happens when you click your buttons? `newpost` doesn't seem to exist in your html. — mykaf, Mar 30 '22 at 15:21
when I click hide/show on the second flip card it doesn't work but when I click on the first flip card it works — Arsencho, Mar 30 '22 at 15:23
I dont see the button with the id that you have specified. Also, would be better if you post your code formatted. — Arm144, Mar 30 '22 at 15:26
sorry, this is my first post, I don't understand what and how — Arsencho, Mar 30 '22 at 15:28
There are also some errors in the body of the HTML, you can use the [Markup Validation Service](https://validator.w3.org/) tool to validate the markup document. — Alireza Rezaee, Mar 30 '22 at 15:29
Does this answer your question? [Simple function hide/show/toggle for a Div](https://stackoverflow.com/questions/32979553/simple-function-hide-show-toggle-for-a-div) — Priya jain, Mar 30 '22 at 16:19

SKONIKS · Answer 1 · 2022-03-30T16:32:36.650

You have two blocks with same ID (button and newpost), it must be always diffrent on one page.

function toggle(id) {
  var div = document.getElementById(id);
  if (div.style.display !== 'none') {
    div.style.display = 'none';
  }
  else {
    div.style.display = 'block';
  }
}

<div id="main">
  <div name="first flip card" style="margin-left: 50px; padding: ">
    <label>
      <input type="checkbox" />
      <div class="flip-card">
        <div class="front">
          <h1>Գերմանիա</h1>
          <p style="font-size: 50px">1</p>
        </div>
        <div class="back">
          <h1>About me</h1>
          <hr />
          <p>some text</p>
          <button onclick="toggle('newpost1')">hide/show</button>
          <p id="newpost1" style="display: none">Test text</p>
          <hr />
        </div>
      </div>
    </label>
  </div>
  <div name="second flip card" style="margin-left: 50px">
    <label>
      <input type="checkbox" />
      <div class="flip-card">
        <div class="front">
          <h1>Գերմանիա</h1>
          <p style="font-size: 50px">1</p>
        </div>
        <div class="back">
          <h1>About me</h1>
          <hr />
          <p>some text</p>
          <button onclick="toggle('newpost2')">hide/show</button>
          <p id="newpost2" style="display: none">Test text</p>
          <hr />
        </div>
      </div>
    </label>
  </div>
</div>

score 0 · Answer 2 · answered Mar 30 '22 at 16:21

According to your Question , What I Understand you want something like this:=

$("h1").on("click", function(){
    console.log($(this).children("div"));
    $(this).siblings("div.content").slideToggle();
});

.content{
 display:none;
 margin: 10px;   
}

h1{
    font-size: 16px;
    font-wieght: bold;
    color: gray;
    border: 1px solid black;
    background: #eee;
    padding: 5px;
}
h1:hover{
 cursor: pointer;
 color: black;   
}

<div class="article">
    <h1>TITLE 1</h1>
    <div class="content">content 1</div>
</div>
<div class="article">
    <h1>TITLE 2</h1>
    <div class="content">content 2</div>
</div>
<div class="article">
    <h1>TITLE 3</h1>
    <div class="content">content 3</div>
</div>
<div class="article">
    <h1>TITLE 4</h1>
    <div class="content">content 4</div>
</div>

http://jsfiddle.net/Rwx7P/3/

score 0 · Accepted Answer · answered Mar 30 '22 at 17:10

Welcome to stackoverflow.

According to the W3C Markup Validation Service tool, this document contains a number of errors, including a "Duplicate ID" error. (See: W3C Validator)

Note: The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). (See: HTML id at MDN)

So we need to use a class instead of ‍newpost id to target those elements.

Change the HTML to the following content — by formatting the code and fixing those errors:

<div id="main">
    <div style="margin-left: 50px;">
        <input type="checkbox" />
        <div class="flip-card">
            <div class="front">
                <h1>Գերմանիա</h1>
                <p style="font-size: 50px;">1</p>
            </div>
            <div class="back">
                <h1>About me</h1>
                <hr />
                <p>some text</p>
                <button type="button">hide/show</button>
                <p class="newpost" style="display: none;"> Test text</p>
                <hr />
            </div>
        </div>
    </div>
    <div style="margin-left: 50px ;">
        <input type="checkbox" />
        <div class="flip-card">
            <div class="front">

                <h1>Գերմանիա</h1>
                <p style="font-size: 50px;">1</p>
            </div>
            <div class="back">
                <h1>About me</h1>
                <hr />
                <p>some text</p>
                <button type="button">hide/show</button>
                <p class="newpost" style="display: none;"> Test text</p>
                <hr />
            </div>
        </div>
    </div>
</div>

Script:

This script scans the entire DOM for all button elements. Then whenever you click on a button, it first finds the parentElement of that button and then toggles the first element with a newpost class inside the corresponding parentElement.

<script>
    document.querySelectorAll('button').forEach((button) => {
        button.addEventListener('click', (event) => {
            const newpostElement = event.target.parentElement.querySelector('.newpost');
            if (newpostElement.style.display !== 'none')
                newpostElement.style.display = 'none';
            else
                newpostElement.style.display = 'block';
        })
    });
</script>

Learn about HTML errors:

Invalid use of name attribute for div element
Invalid use of padding: ;
Element div not allowed as child of element label
The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.
Duplicate ID button.

how to create hide/show toggle

3 Answers3