How to hide and display inline element using javascript

Question

I have a inline element. I am trying to hide and show it using button. But when I click document.getElementById('').style.display = 'inline'; I'm getting block elements. How to get the element inline as it was set before. my code looks like;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
          }
          #mydata{
            display:none;
            font-size: 25;
          }
        .chartCard {
            width: 100vw;
            height: calc(90vh - 100px);
            background: rgb(133, 43, 43);
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .chartBox {
            width: 650px;
            padding: 8px;
            border-radius: 20px;
            margin: 1px 22px;
            border: solid 3px rgba(255, 26, 104, 1);
            background: white;
          }
          .button:hover{
            background-color: #005201;
            color: rgb(255, 253, 250);;
        }
            .button {
                background-color: rgb(69, 9, 188);
                border: none;
                color: white;
                padding: 16px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 20px;
                margin: 2px 2px;
                transition-duration: 0.4s;
                cursor: pointer;
            }
    </style>
    <script>
        function changedata(parameter){
            if(parameter==0){
                document.getElementById('myreport').style.display = 'none';
                document.getElementById('mydata').style.display = 'block';
            }
            else{
                document.getElementById('mydata').style.display = 'none';
                document.getElementById('myreport').style.display = 'inline';
            }
        }
    </script>
</head>
<body>
    <button class="button" onclick="changedata(1)">Myreport</button>
    <button class="button" onclick="changedata(0)">Mydata</button>
    <div id="mydata">
        <h1>This is my Report</h1>
    </div>
    <div class="chartCard" id="myreport">
        <div class="chartBox">
            <p>Ram</p>
        </div>
        <div class="chartBox">
            <p>Shyam</p>
        </div>
    </div>
</body>
</html>

So, as you can see as I click button, inline element are getting converted to block element. how to resolve it. looking for your help. Thanks in advance

The display property is flex before you are changing it to inline. So the element’s children will change to block instead of flex-item. — Andy
– Andy, Commented Jul 6, 2022 at 14:49
Please refer to this thread for reference: stackoverflow.com/a/224626/11242070 — Usman Afzal
– Usman Afzal, Commented Jul 6, 2022 at 15:13

Nitin S · Accepted Answer · 2022-07-06 14:54:02Z

1

Update your function to set display to flex for myreport, initially you have set display:flex for .chartCard

   function changedata(parameter) {
     if (parameter == 0) {
       document.getElementById('myreport').style.display = 'none';
       document.getElementById('mydata').style.display = 'block';
     } else {
       document.getElementById('mydata').style.display = 'none';
       document.getElementById('myreport').style.display = 'flex';
     }
   }

fiddle here: https://jsfiddle.net/fhps08re/

answered Jul 6, 2022 at 14:54

Nitin S

7,71110 gold badges65 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mehrab safdel · Accepted Answer · 2022-07-06 14:59:50Z

when you click on button, your 'myreport' element get display: 'inline'. it's work correct. because your elements with 'chartBox' class is div and div has display: block in its default css, the elements shows in two line.

use this to correct : when you click the button, instead of set display to inline, set display to flex. as you do this in your css.

function changedata(parameter){
            if(parameter==0){
                document.getElementById('myreport').style.display = 'none';
                document.getElementById('mydata').style.display = 'block';
            }
            else{
                document.getElementById('mydata').style.display = 'none';
                document.getElementById('myreport').style.display = 'flex';
            }
        }

or you can use span instead of div with class: 'chartBox'

Cédric · Accepted Answer · 2022-07-06 15:01:58Z

0

You are using display:flex so you have to set it back. Also, you don't need js to hide or show your sections, you can use :target.

.menu{
  display:flex;
}
a{
  margin-right:20px;
}
.section{
  padding:20px;
  width:fit-content;
  border: 1px solid black;
  display:none;
}
.section:target{
  display:block;
}

<div class="menu">
  <a href="#a">go to A</a>
  <a href="#b">go to B</a>
  <a href="#c">go to C</a>
</div>
<br>
<div id="a" class="section">Section A</div>
<div id="b" class="section">Section B</div>
<div id="c" class="section">Section C</div>

answered Jul 6, 2022 at 15:01

Cédric

2,6593 gold badges13 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to hide and display inline element using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related