Toggle Box

by joaopcos

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>joaopcos.xyz/admin/ — Dashboard</title>
    <link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
    <header class="flex column">
        <div class="flex align-items-center justify-content-space-between">
            <h3 class="text-align-center">Dashboard</h3>
            <a href="#" class="scale-up">
                <img src="../assets/images/logout.png" alt="logout-icon">
            </a>
        </div>
        <hr>
    </header>
    <main>
        <section id="link-manager" class="box flex column margin-bottom-4">
            <div class="togglebox flex justify-content-space-between padding-3">
                <p>Gerenciamento de Links</p>
            </div>
            <div class="">
                <hr class="margin-0">
                <div id="link-manager-editor" class="flex column gap-3 padding-3">
                    <a href="#" class="link text-align-center box scale-up">Tutoriais de WordPress 👨‍💻</a>
                    <a href="#" class="link text-align-center box scale-up">O Meu Encurtador De Link (Decreaser) 🔗</a>
                    <a href="#" class="link text-align-center box scale-up">Projeto De Hospedagem De Arquivos Open Source 🎯</a>
                    <a href="#" class="link text-align-center box scale-up">sarain.ag (Site Que Fiz No WordPress) 💻</a>
                    <a href="#" class="link text-align-center box scale-up">espacoviverpsicologia.com (Site Que Fiz No WordPress)💻</a>
                </div>
            </div>
        </section>
        <section id="blog-manager" class="box flex column">
            <div class="togglebox flex justify-content-space-between padding-3">
                <p>Gerenciamento do Blog</p>
            </div>
            <div class="togglebox-body">
                <hr...

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* Common */
html{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    --primary: #111;
    --gray-dark-1: #191919;
    --gray-dark--2: #161616;
    --gray-dark-3: #151515;
    --border: #222;
    --text: #555;
    --text-2: #969696;
    --white: #fff;
}
body{
    background: var(--primary);
    color: var(--white);
    flex-grow: 1;
    margin: 32px auto;
    position: relative;
    width: auto;
    max-width: 540px;
}
a,p,span,h1,h2,h3,h4,h5{
    margin: 0;
    font-weight: 400;
    text-decoration: none;
}
h1,h2,h3,h4,h5{
    line-height: 1.2em;
}
hr{
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}
hr{
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}
input,textarea{
    padding: 15px 10px;
    background-color: var(--gray-dark-3);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}
textarea:focus, input:focus{
    outline: none;
}
button{
    padding: 15px;
    background-color: var(--gray-dark-1);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    cursor: pointer;
}
footer{
    font-size: 12px;
    color: var(--text)
}
footer a{
    color: inherit;
    text-decoration: underline;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 16px;
    box-shadow: inset 0 0 10px 10px var(--border);
    border: solid 3px transparent;
}
::-webkit-scrollbar-thumb:hover {
    border-radius: 16px;
    box-shadow: inset 0 0 10px 10px var(--border);;
    border: solid 3px transparent;
}
/* Utilities */
.flex{
    display: flex;
}
.justify-content-center{
    justify-content: center;
}
.justify-content-space-between{
   ...

JavaScript

$("main").on('click', '.togglebox', function(){
    const thisBox = $(this).children(".togglebox-body")
    thisBox.toggle()
})