Custom Sidebar

  • I want make a custom sidebar by my own HTML, CSS, JS code. When I insert this code in HTML block and Additional CSS block, my whole webpage get covered by this. I want to make a long sidebar collapsable. How i can do that using this code??

    <!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         a:link {
         color: black;
         background-color: transparent;
         text-decoration: none;
         }
         a:hover {
         color: green;
         background-color: transparent;
         text-decoration: underline;
         }
         ul {
         list-style: none;
         font-size:17px;
         }
         ul li:before {
         content: "\2192  \0020";
         }
         li{
         padding:  5px;
         }
         div {
         width: 34.5%;
         padding: 10px;
         text-align: justify;
         background:  #ffe6e6;
         font-size: 18px;
         }
         h2 {
         text-decoration: underline;
         padding:10px;
         }
         .collapsible {
         background-color: #F8F8FF;
         font-weight: bold;
         color: red;
         cursor: pointer;
         padding: 18px;
         width: 37%;
         text-align: left;
         outline: none;
         font-size: 18px;
         }
         .active, .collapsible:hover {
         background-color: #F8F8FF;
         }
         .content {
         padding: 0 10px;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.2s ease-out;
         background-color: #F8F8FF;
         }
      </style>
   </head>
   <body>
      <button class="collapsible">Java Tutorial</button>
      <div class="content">
         <ul>
            <li> Java tutorial</a></li>
         </ul>
      </div>
      <button class="collapsible">Java Basics</button>
      <div class="content">
         <ul>
            <li>Java introduction</a></li>
            <li>Java vs C++</a></li>
            <li>JDK vs JRE vs JVM</a></li>
         </ul>
      </div>
      <button class="collapsible">Java Control Flow </button>
      <div class="content">
         <ul>
            <li>Control flow statements in Java</a></li>
            <li> Java If Else</a></li>
            <li>Java Switch case</a></li>
            <li>Java Foe loop</a></li>
         </ul>
      </div>
      <button class="collapsible">Array</button>
      <div class="content">
         <ul>
            <li>Array in java</a></li>
         </ul>
      </div>
      </ul>
      </div>
      <script>
         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.maxHeight){
               content.style.maxHeight = null;
             } else {
               content.style.maxHeight = content.scrollHeight + "px";
             }
           });
         }
      </script>
   </body>
</html>

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator t-p

    (@t-p)

    I recommend asking at your theme’s dedicated support so the theme’s developers and support community can help you with this.

Viewing 1 replies (of 1 total)
  • The topic ‘Custom Sidebar’ is closed to new replies.