Toggle Show/Hide Div With Button

toggle show/hide div with button?

Look at jQuery Toggle

HTML:

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

jQuery:

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

For versions of jQuery 1.7 and newer use

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

For reference, kindly check this demo

Button show/hide div in javascript, toggle not working

Turns out I didn't understand the question properly. The problem is, you're removing the show class from all the content divs in the remove() function. Then you're adding the show class again to the corresponding content div which doesn't actually toggle the content.

Simple fix. Inside the remove() function, only remove the show class if the div already has it. here's a fiddle
https://jsfiddle.net/sap4bn8d/

Update
We forgot to ingore to remove the show class if the corresponding content is already shown. Here's the fix:
https://jsfiddle.net/sap4bn8d/1/

Show and hide divs when click button

The JS toggle function is good for toggling classes on and off.

Here's a simple example

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");

btn.addEventListener("click", () => {
    div.classList.toggle('hide');
})

.hide {
  display: none;
}

<button id="btn-login">Unshow/show</button>
<div id="loglog">Stuff to unshow on button click and show on the next button click</div>

How to set the toggle of a div element to be first hidden and only after clicked shown?

I would recommend you to use getComputedStyle() rather than your current approach of calling .style. As stated on the documentation,

The Window.getComputedStyle() method returns an object containing the
values of all CSS properties of an element, after applying active
stylesheets and resolving any basic computation those values may
contain.

Using .style will not allow you to read CSS defined within an external stylesheet, as it can only read inline style.

And now, to answer your question, you can simply set #myDIV to include the additional CSS property display, and set it to none, such that it is not displayed on load.

myFunction() will only be triggered when the button is clicked, whereby getComputedStyle() will be used to check the CSS properties of #myDIV.

function myFunction() {  var x = document.getElementById("myDIV");  if (window.getComputedStyle(x).display === "none") {    x.style.display = "block";  } else {    x.style.display = "none";  }}

#myDIV {  width: 100%;  padding: 50px 0;  text-align: center;  background-color: lightblue;  margin-top: 20px;  display: none;}

<!DOCTYPE html><html>
<head>  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>  <button onclick="myFunction()">Try it</button>  <div id="myDIV">    This is my DIV element.  </div>  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p></body>
</html>

Javascript toggle button: change action sequence from show/hide to hide/show

Just use:

if (content.style.display === "none") {
  content.style.display = "block";
} else {
  content.style.display = "none";
}

instead of:

if (content.style.display === "block") {
  content.style.display = "none";
} else {
  content.style.display = "block";
}

This is your code:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  });
}

.active, .collapsible:hover {
    background-color: #8511ae;
    color: white; font-weight: bold; text-decoration: underline;
}
  .collapsible {
    background-color: #faf9d8;
    color: #4e3fe3; font-style: italic; font-weight: bold;
    font-family: verdana, sans-serif;
    cursor: pointer;
    padding: 5px;
    width: 35%;
    float: left
    border: 0px solid #8511ae;
    text-align: center;
    outline: none;
    font-size: 15px;
    margin-top: 2%;
    margin-bottom: 0%;
    margin-left: 2%;
    margin-right: 24%;
}
  .content {
    width: 35%;
    float: left;
    padding: 0px;
    border: 0px solid #8511ae;
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: 2%;
    margin-right: 3%;
    background-color: #faf9d8;
}

<button type="button" class="collapsible">Toggle document map</button>
    <div class="content">
    <p>bla..bla</p>
    </div>

Hide / Show toggle button doesn't start with content hidden

add style display none to your div id moreDetails

<div id="moreDetails" style="display: none">

or you can use like this also

<script>
function toggle(){
    let Text = document.getElementById('moreDetails');

    if(Text.style.display == "none"){
        Text.style.display= "block";
    }
    else {
        Text.style.display = "none";
    }
}
document.getElementById("moreDetails").style.display = "none";
 
</script>

or you can use
ternary operator

<script>
    function toggle(){
        const Text = document.getElementById('moreDetails');
        Text.style.display = Text.style.display == "none" ? "block" : "none";
    }
    document.getElementById("moreDetails").style.display = "none";
</script>

Toggle Show/Hide Div With Button