Html Question posted in
Some basic documentation can be found here.

Html – Hide <br> after hiding an adjacent <div>

I have made 3 divs, one a little bit above the other, each separared by a <br>. However when my function hides one of them, the <br> is still there, therefore each div is misplaced when all the others are hidden.

function hide1() {
  var x = document.getElementById("myDiv1");
  if (x.style.display==="none") {
    x.style.display="block";
  }
  else {
    x.style.display="none";
  }
}
<div id="myDiv1">div 1</div> <br>
<div id="myDiv2">div 2</div> <br>
<div id="myDiv3">div 3</div>
<button onclick="hide1()">Toggle div 1</button>

I have 2 more functions for the other divs.

I tried putting the <br> inside the <div> in hopes of <br> visibility being none as well, but it just didn’t read it.

Tags:

6

Answers


  1. 0

    You’re not hiding the <br>.
    You’re only hiding the <div>.
    You should give the <br> elements ids or a class and then hide them with your js script.

    for example:

      var x = document.getElementById("br-id");
  if (x.style.display==="none") {
    x.style.display="block";
  }
  else {
    x.style.display="none";
  }
    Login or Signup to reply.
  2. 0

    Your problem is that you are only hiding the divs, you need to hide the line breaks as well.

        <div id="myDiv1">div 1</div> <br id="br1">

    <div id="myDiv2">div 2</div> <br id="br2">

    <div id="myDiv3">div 3</div>

<script>
function hide1() {
    var x = document.getElementById("myDiv1");
    var y = document.getElementById("br1");
    if (x.style.display==="none") {
            x.style.display="block";
            y.style.display="inline";
            }
        else {
        x.style.display="none";
        y.style.display="none";
        }

}
function hide2() {
    var x = document.getElementById("myDiv2");
    var y = document.getElementById("br2");
    if (x.style.display==="none") {
            x.style.display="block";
            y.style.display="inline";
            }
        else {
        x.style.display="none";
        y.style.display="none";
    }

}
function hide3() {
    var x = document.getElementById("myDiv3");
   
    if (x.style.display==="none") {
            x.style.display="block";
            }
        else {
        x.style.display="none";
        
    }

}

    if you change your code to this, it will look fine.

    Login or Signup to reply.
  3. 0

    Instead of using <br> tags to make gaps between divs, use CSS.

    function hide(id) {
  var x = document.getElementById(id);
  x.classList.toggle("hidden");
}
    .hidden {
  display: none !important;
}
div:not(.hidden) ~ div {
  margin-top: 1em;
}
    <button onclick="hide('myDiv1')">Toggle div 1</button>
<button onclick="hide('myDiv2')">Toggle div 2</button>
<button onclick="hide('myDiv3')">Toggle div 3</button>
<div id="myDiv1">div 1</div>
<div id="myDiv2">div 2</div>
<div id="myDiv3">div 3</div>
    Login or Signup to reply.
  4. 0

    Forget br in the first place. Breaks should not be used for styling of the layout, they are semantically for adding a line break to content, not page layout.

    Instead use CSS classes and create a simple class that can be toggled on or off for the hiding/showing.

    // Set up event handlers in JavaScript, not with HTML
document.querySelector("section > button").addEventListener("click", showHide);

const d1 = document.querySelector("#d1");

function showHide(event) {
 d1.classList.toggle("hidden");
}
    /* Give all the div elements within a section element a bottom margin */
section > div {margin-bottom:1em;}


/* This class will be toggled on or off to show or hide */
.hidden { display:none; }
    <section>
  <div id="d1">div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <button>Toggle div 1</button>
</section>
    Login or Signup to reply.
  5. 0

    You need to remove the <br> when you first toggle and then you need to add it back when you toggle the second time.

    function hide1() {
  let x = document.getElementById("myDiv1");
  if (x.style.display==="none") {
    x.style.display="block";
  }
  else {
    x.style.display="none";
  }




  let cell = document.getElementsByTagName('br');
  let length = cell.length;
  
  if (length == 2)cell[0].parentNode.removeChild(cell[0]);
  else{
     var br = document.createElement("br");        
     x.after(br); 
  }
}
    <div id="myDiv1">div 1</div> <br>
<div id="myDiv2">div 2</div> <br>
<div id="myDiv3">div 3</div>
<button onclick="hide1()">Toggle div 1</button>
    Login or Signup to reply.
  6. 0

    As gre_gor noted, it’s better to use css to space your divs (margin-bottom).

    It is generally not a good idea to use inline event handlers.

    If you actually need the breaks, here is a a way to do that, using event delegation to handle the button.

    document.addEventListener(`click`, handle);

function hide(id) {
  id = `#${id}`;
  const elem = document.querySelector(id);
    if (elem.style.display === `none`){
      elem.style.display = `block`;
      // re-add br
      elem.insertAdjacentHTML(`afterend`, `<br>`);
      return;
    }
    
    elem.style.display = `none`;
    // remove br
    document.querySelector(`${id} + br`).remove();
}

function handle(evt) {
  if (evt.target.dataset?.hide) {
    return hide(evt.target.dataset.hide);
  }
}
    <div id="myDiv1">div 1</div> <br>
<div id="myDiv2">div 2</div> <br>
<div id="myDiv3">div 3</div> <br>
<button data-hide="myDiv1">Toggle div 1</button>
<button data-hide="myDiv2">Toggle div 2</button>
<button data-hide="myDiv3">Toggle div 3</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search