Doubt of how to collapse / collapse a menu by clicking on the other one

Navigation
0

I have a question on the following item, I created a SideBar with bootstrap menu, but I wanted to click on one, the one that had open shrink. Example

Codemadesofar: 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--><scriptsrc="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>
    
asked by anonymous 01.08.2018 / 19:56

1 answer

1

Face is easy you create an empty%% of the document reading.

See in this ex I used a table to exemplify its 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>Fareioexemplocomtabela</h1><br><br><br><!DOCTYPEhtml><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>

put an id for each ul or div or tr in the example that I showed variavel

You put an event in the click of this tag. and there you hide the id that clicked and shows the last hidden, which 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 you hide the opened one and open what you clicked

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

    
01.08.2018 / 21:27
How to handle reserved character in an .ini file in php? I can not correctly pass the arguments to the function that updates data in the database (Laravel)