CODEWITHSUNDEEP
htmlcsstoggle
Lyubomir Valchev
Lyubomir Valchev

Reputation: 71

HTML toggle show and hide

I have developed an HTML document with sidebar headings where I want to click on the heading and it must show and hide the components underneath the heading.

The problem is that it only works for my "LOGINS" heading. For my "What is attendance" heading it does not show and hide the components underneath it, it hides the "LOGIN" components. So according to me it does not take effect for the "What is attendance" heading.

I would also like to have the components hidden every time the document is opened.

Another question. How can I make the arrow rotate every time the components underneath the headings are being shown?

This is what I have so far:

HTML

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<body style=background-image:url('Images/blue.jpg')>

<section id="body" class="width" >


            <aside id="sidebar" class="column-left">
            <img class="thumbnail" src="Images/VsoftLogo.jpg" alt="thumbnail" />

            <h2 onclick="myFunction()" class ="sidebar-heading"><i class="down" style-"top:-50px"></i>   LOGINS</h2>
             <div id="myDIV">
              <nav id="mainnav">
                <ul>
                                    <li><a href="#">Home</a></li>
                                    <li><a href="#">Products</a></li>
                                    <li><a href="#">Solutions</a></li>
                                    <li><a href="#">Contact1</a></li>
                                    <li><a href="#">Contact1</a></li>
                                    <li><a href="#">Contact1</a></li>

                            </ul>
            </nav>  


            </div>


            <h4 onclick="myFunction()" class ="sidebar-heading"><i class="down" style-"top:-50px"></i>   what is attendance</h4>
             <div id="myDIV">
              <nav id="mainnav">
                <ul>
                                    <li><a href="#">Example</a></li>
                                    <li><a href="#">Example2</a></li>
                                    <li><a href="#">Example3</a></li>
                                    <li><a href="#">Example4</a></li>
                                    <li><a href="#">Example</a></li>
                                    <li><a href="#">Contact1</a></li>
                            <hr>                                
                            </ul>
            </nav>  
            </div>

CSS

.mystyle {
    width: 100%;
    padding: 25px;
    background-color: coral;
    color: white;
    font-size: 25px;
}
i {
  border: solid #ffb200;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px;

}
.down {
   color:#ffb200;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}

Upvotes: 1

Views: 401

Answers (1)

nashcheez
nashcheez

Reputation: 5183

Here you have used an id for multiple containers. An id at all times in a DOM should be unique.

Also, there were syntax errors in the HTML with the style tag.

What you can instead of defining ids here, is used the event property and manipulate it accordingly to hide by default on page load.

You can assign class mainnav to your show/hide containers to make them h

Check fiddle.

Refer code:

function myFunction(event) {
  var x = event.target.nextElementSibling,
    y = event.target.firstChild;
  if (x.style.display === 'none' || x.style.display === '') {
    x.style.display = 'block';
    y.classList.add("down");
    y.classList.remove("right");
  } else {
    x.style.display = 'none';
    y.classList.remove("down");
    y.classList.add("right");
  }
}
.sidebar-heading {
  cursor: pointer;
}

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

i {
  border: solid #ffb200;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px;
}

.down {
  color: #ffb200;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.right {
  color: #ffb200;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}

.mainnav {
  display: none;
}
<body>
  <section id="body" class="width">
    <aside id="sidebar" class="column-left">
      <h2 onclick="myFunction(event);" class="sidebar-heading"><i class="right" style="top:-50px"></i> LOGINS</h2>
      <div class="mainnav">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Solutions</a></li>
            <li><a href="#">Contact1</a></li>
            <li><a href="#">Contact1</a></li>
            <li><a href="#">Contact1</a></li>
          </ul>
        </nav>
      </div>


      <h4 onclick="myFunction(event);" class="sidebar-heading"><i class="right" style="top:-50px"></i> what is attendance</h4>
      <div class="mainnav">
        <nav>
          <ul>
            <li><a href="#">Example</a></li>
            <li><a href="#">Example2</a></li>
            <li><a href="#">Example3</a></li>
            <li><a href="#">Example4</a></li>
            <li><a href="#">Example</a></li>
            <li><a href="#">Contact1</a></li>
            <hr>
          </ul>
        </nav>
      </div>

Upvotes: 1

Related Questions