Doubt on how to shrink/Collapse one menu by clicking the other

Asked

Viewed 1,016 times

0

I have a question on the following item, I created a Sidebar with menu in bootstrap, but I wanted to click one, the one that had opened shrink. Example inserir a descrição da imagem aqui

Code done so far: codeply

/*
    DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
    font-family: 'Poppins', sans-serif;
    background: #0e3c58;
}rg
p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}
div.sidebar-header{
	background: #0e3c58 !important; 
}

ul.list-unstyled.CTAs{
	background: #0e3c58 !important; 
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #0e3c58 ;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
	text-align: center; 
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
	padding-left: 10px;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #f39223;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #f39223;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #cc6823;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 10px;
	margin: 0px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Collapsible sidebar using Bootstrap 4</title>

    <!-- Bootstrap CSS CDN -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>

<body>
    <div class="wrapper">
        <!-- Sidebar  -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <img src=""></img>
            </div>

            <ul class="list-unstyled components">
            <li class="active">
                <label for="sel1">Selecione a Região:</label>
                <select class="form-control" id="regiao">
                    <option>A</option>
                    <option>B</option>
                </select>
                <br/>
                </li>
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-users"></i> Área Pública</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#Importacao" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">A</a>
                            <ul class="collapse list-unstyled" id="Importacao">
                                <li>
                                    <a href="#">Tipo 1</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">B</a>
                        </li>
                        <li>
                            <a href="#">C</a>
                        </li>
                        <li>
                            <a href="#">Cargas Perigosas</a>
                        </li>
                    </ul>
                </li>
                <li class="active">
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-user-lock"></i> Área Privada</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li>
                            <a href="#">A</a>
                        </li>
                        <li>
                            <a href="#">B</a>
                        </li>
                        <li>
                            <a href="#">C</a>
                        </li>
                        <li>
                            <a href="#">D</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

      <!-- Page Content  -->
        <div id="content">
            <iframe src="https://www.w3schools.com/" width="100%" height="100%"></iframe>
        </div>
    </div>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>

</html>

javascript css css3 twitter-bootstrap

1 answer

1


guy it’s easy you create a variavel empty in reading document.

See this ex I used a table to exemplify your menu:

$( document ).ready(function() {
  
  last_clicked = "";
    
  $("tr").click(function(){
    
    var id = $(this).attr('id');
 
    if(last_clicked == ""){
      $(this).children('td').hide();
      last_clicked = $(this).attr('id');
    }
    else{
      
      $("#"+last_clicked).children('td').show();
      last_clicked = $(this).attr('id');
      $(this).children('td').hide();
      
    }
    
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>Farei o exemplo com tabela</h1>
  <br><br><br>
  <!DOCTYPE html>
<html>
<head>
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<table id="customers">
  <tr id="tr1">
    <th>tr1</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr id="tr2">
    <th>tr2</th>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr id="tr3">
     <th>tr3</th>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr id="tr4">
    <th>tr4</th>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr id="tr5">
    <th>tr5</th>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr id="tr6">
  <th>tr6</th>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr id="tr7">
  <th>tr7</th>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  
</table>

</body>
</html>

</div>

place an id for each ul or div or tr in the example I showed <tr id="tr3">

ai u put an event in the click of that tag. and then you hide the id that clicked and shows the last hidden, that will be what is in the value of the variable:

$("tr").click(function(){

    var id = $(this).attr('id');

    if(last_clicked == ""){
      $(this).children('td').hide();
      last_clicked = $(this).attr('id');
    }
    else{

      $("#"+last_clicked).children('td').show();
      last_clicked = $(this).attr('id');
      $(this).children('td').hide();

    }

  });

now when you click on another Window hides the open and opens the clicked

I did in jquery but Voce can use any code, including javascript, hope to have helped.

  • 1

    I did otherwise, using data toggle, but I tested this way with Javascript and it worked. Thank you Julio.

Browser other questions tagged javascript css css3 twitter-bootstrap

You are not signed in. Login or sign up in order to post.