how to create hide/show toggle-CodePudding

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 >
<div >     
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div >
<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 >
<div >
                    
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div >
<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.

CodePudding user response：

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 >
            <div >
                <h1>Գերմանիա</h1>
                <p style="font-size: 50px;">1</p>
            </div>
            <div >
                <h1>About me</h1>
                <hr />
                <p>some text</p>
                <button type="button">hide/show</button>
                <p  style="display: none;"> Test text</p>
                <hr />
            </div>
        </div>
    </div>
    <div style="margin-left: 50px ;">
        <input type="checkbox" />
        <div >
            <div >

                <h1>Գերմանիա</h1>
                <p style="font-size: 50px;">1</p>
            </div>
            <div >
                <h1>About me</h1>
                <hr />
                <p>some text</p>
                <button type="button">hide/show</button>
                <p  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.

CodePudding user response：

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 >
    <h1>TITLE 1</h1>
    <div >content 1</div>
</div>
<div >
    <h1>TITLE 2</h1>
    <div >content 2</div>
</div>
<div >
    <h1>TITLE 3</h1>
    <div >content 3</div>
</div>
<div >
    <h1>TITLE 4</h1>
    <div >content 4</div>
</div>

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

CodePudding user response：

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 >
        <div >
          <h1>Գերմանիա</h1>
          <p style="font-size: 50px">1</p>
        </div>
        <div >
          <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 >
        <div >
          <h1>Գերմանիա</h1>
          <p style="font-size: 50px">1</p>
        </div>
        <div >
          <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>