I'm currently trying to create a dashboard for my website and i'm a pretty begginer with javascript. In this case i'm trying to create a code for toggling a div, i tried to create a function to click in a div with the class "togglebox", and make his child div "togglebox-body" toggle, but it isn't working.
$("main").on('click', '.togglebox', function() {
const thisBox = $(this).children(".togglebox-body")
thisBox.toggle()
})
@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 {
justify-content: space-between;
}
.align-items-center {
align-items: center;
}
.text-align-center {
text-align: center;
}
.row-reverse {
flex-direction: row-reverse;
}
.column {
flex-direction: column;
}
.column-reverse {
flex-direction: column-reverse;
}
.flex-grow {
flex-grow: 1;
}
.width-100 {
width: 100%;
}
.margin-0 {
margin: 0;
}
.margin-1 {
margin: .25rem;
}
.margin-2 {
margin: .5rem;
}
.margin-3 {
margin: .75rem;
}
.margin-4 {
margin: 1rem;
}
.margin-5 {
margin: 2rem;
}
.margin-top-1 {
margin-top: .25rem;
}
.margin-top-2 {
margin-top: .5rem;
}
.margin-top-3 {
margin-top: .75rem;
}
.margin-top-4 {
margin-top: 1rem;
}
.margin-top-5 {
margin-top: 2rem;
}
.margin-bottom-1 {
margin-bottom: .25rem;
}
.margin-bottom-2 {
margin-bottom: .5rem;
}
.margin-bottom-3 {
margin-bottom: .75rem;
}
.margin-bottom-4 {
margin-bottom: 1rem;
}
.margin-bottom-5 {
margin-bottom: 2rem;
}
.margin-left-1 {
margin-left: .25rem;
}
.margin-left-2 {
margin-left: .5rem;
}
.margin-left-3 {
margin-left: .75rem;
}
.margin-left-4 {
margin-left: 1rem;
}
.margin-left-5 {
margin-left: 2rem;
}
.margin-right-1 {
margin-right: .25rem;
}
.margin-right-2 {
margin-right: .5rem;
}
.margin-right-3 {
margin-right: .75rem;
}
.margin-right-4 {
margin-right: 1rem;
}
.margin-right-5 {
margin-right: 2rem;
}
.padding-0 {
padding: 0;
}
.padding-1 {
padding: .25rem;
}
.padding-2 {
padding: .5rem;
}
.padding-3 {
padding: .75rem;
}
.padding-4 {
padding: 1rem;
}
.padding-5 {
padding: 2rem;
}
.padding-top-1 {
padding-top: .25rem;
}
.padding-top-2 {
padding-top: .5rem;
}
.padding-top-3 {
padding-top: .75rem;
}
.padding-top-4 {
padding-top: 1rem;
}
.padding-top-5 {
padding-top: 2rem;
}
.padding-bottom-1 {
padding-bottom: .25rem;
}
.padding-bottom-2 {
padding-bottom: .5rem;
}
.padding-bottom-3 {
padding-bottom: .75rem;
}
.padding-bottom-4 {
padding-bottom: 1rem;
}
.padding-bottom-5 {
padding-bottom: 2rem;
}
.padding-left-1 {
padding-left: .25rem;
}
.padding-left-2 {
padding-left: .5rem;
}
.padding-left-3 {
padding-left: .75rem;
}
.padding-left-4 {
padding-left: 1rem;
}
.padding-left-5 {
padding-left: 2rem;
}
.padding-right-1 {
padding-right: .25rem;
}
.padding-right-2 {
padding-right: .5rem;
}
.padding-right-3 {
padding-right: .75rem;
}
.padding-right-4 {
padding-right: 1rem;
}
.padding-right-5 {
padding-right: 2rem;
}
.gap-1 {
gap: .25rem;
}
.gap-2 {
gap: .5rem;
}
.gap-3 {
gap: .75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 2rem;
}
.box {
background-color: var(--gray-dark-1);
border: 1px solid var(--border);
}
/* Animations */
.scale-up {
transition: 150ms;
}
.scale-up:hover {
transition: 150ms;
transform: scale(1.05);
}
/* Common */
.avatar {
border-radius: 100%;
width: 96px;
height: 96px;
}
.name {
font-size: 18px;
font-weight: 600;
}
.bio {
font-size: 14px;
}
.link {
padding: 15px;
color: var(--text);
}
/* Blog Styling */
#post-wrapper {
padding: 25px;
color: var(--text);
}
#post-wrapper>hr {
margin: 0;
}
.post-details {
color: var(--text);
font-size: 12px;
}
.post-title {
color: var(--text-2);
font-weight: 700;
}
.post-content {
color: var(--text)
}
/* Dashboard */
.togglebox {
cursor: pointer;
font-size: 16px;
color: var(--text)
}
.togglebox::after {
content: "\25BC";
}
#link-manager-editor>a {
cursor: move;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header >
<div >
<h3 >Dashboard</h3>
<a href="#" >
<img src="../assets/images/logout.png" alt="logout-icon">
</a>
</div>
<hr>
</header>
<main>
<section id="link-manager" >
<div >
<p>Gerenciamento de Links</p>
</div>
<div >
<hr >
<div id="link-manager-editor" >
<a href="#" >Tutoriais de WordPress