Expandable Section with only header visible when collapsed to the side

Question

Expandable Section with only header visible when collapsed to the side

I am currently working on developing a Panel in the form of a div with two additional divs inside (one for the title and one for the content). Here is what I have in mind:

<div class="left-panel">
    <div class="title">
        <span>title<span>
    </div>
    <div class="content">
        <span>some content</span>
    </div>    
</div>

My goal is to be able to collapse this panel by clicking on an arrow. When collapsed, it should transform into a narrow bar on the left side, allowing adjacent panels to expand wider. The desired effect can be seen in this image: https://i.sstatic.net/gQSk6.jpg I am encountering issues with writing the necessary CSS to achieve this functionality. How can I adjust the CSS to make it look like the example? Specifically, how can I make the content part disappear and rotate the entire panel along with the title div to the left side?

javascript html css

Answer 1

Answer №1

To implement this functionality in JavaScript, you can toggle the class ('collapsed' or a similar name) on the parent element (left-panel). You can then add additional CSS rules for .left-panel.collapsed, like so:

.left-panel.collapsed > .content {
    display: none;
}

.left-panel.collapsed {
    transform: rotate(-90deg);
}

These rules handle basic rotation and hiding of content. To enhance the animation, size, position, etc., you may need to include more CSS properties.

Answer 2

To implement this functionality in JavaScript, you can toggle the class ('collapsed' or a similar name) on the parent element (left-panel). You can then add additional CSS rules for .left-panel.collapsed, like so:

.left-panel.collapsed > .content {
    display: none;
}

.left-panel.collapsed {
    transform: rotate(-90deg);
}

These rules handle basic rotation and hiding of content. To enhance the animation, size, position, etc., you may need to include more CSS properties.

Answer 3

Answer №2

Utilize this code snippet to achieve the desired outcome!

REFERENCE: https://www.w3schools.com/howto/howto_js_sidenav.asp

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>   
</body>
</html>

Answer 4

Utilize this code snippet to achieve the desired outcome!

REFERENCE: https://www.w3schools.com/howto/howto_js_sidenav.asp

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>   
</body>
</html>

Answer 5

Answer №3

$('#toggle').click(function toggle(){
$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-sm-12 col-sm-9");
});

.collapsed {
        display: none;
        margin-left: -25%; /* same width as sidebar */
    }
.btn{
  display: block !important;
  }

<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row" id="row-main">
        <div class="col-sm-3" id="sidebar">
            Your sidebar content
        </div>
        <div class="col-sm-9 pull-right" id="content" style="float:left;">
               <button class="btn" id="toggle">Toggle</button>
      </div>
    </div>
</div>
</body>
</html>

Place the following code to the left side of the webpage

Answer 6

$('#toggle').click(function toggle(){
$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-sm-12 col-sm-9");
});

.collapsed {
        display: none;
        margin-left: -25%; /* same width as sidebar */
    }
.btn{
  display: block !important;
  }

<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row" id="row-main">
        <div class="col-sm-3" id="sidebar">
            Your sidebar content
        </div>
        <div class="col-sm-9 pull-right" id="content" style="float:left;">
               <button class="btn" id="toggle">Toggle</button>
      </div>
    </div>
</div>
</body>
</html>

Place the following code to the left side of the webpage

Expandable Section with only header visible when collapsed to the side

Answer №1

Answer №2

Answer №3

Similar questions

Unable to retrieve value from a hidden input field using JavaScript

What is the best way to transfer data between HTML files using Python?

Extract latitude and longitude data using Mapbox's autocomplete feature

Issues with uploading files in NodeJs using express-fileupload are causing errors

Show exclusive results of search queries from the database

Encountering problem with selecting values in Select2 with ajax

Issue with Bootstrap: Navbar elements shifting when page width is decreased

The error message encountered with React Easy DatePicker is: "Uncaught ReferenceError: process is not defined."

Verify that the select field has been chosen using Protractor

Performing AJAX callback function on success in jQuery

Manage your profile images effortlessly by automatically removing any that are not currently in use

Angular 2: The window.crypto.subtle.importKey function functions properly on 'localhost' but encounters issues on an 'ip' address

jQuery functions not functioning properly when triggered by an event

Tips for getting the setInterval function to work with a progress bar even when a tab is not in focus

Use a variable to determine which image to display on various pages

Keep an ear out for upcoming occasions once the transition has been completed

Placing horizontal text over a Bootstrap 5 grid

Using AJAX (jQuery) to process and refine JSON data through filtration

Retrieving PHP information using Javascript and storing it in an array

Trigger a function in jQuery when the DOM undergoes changes