Skip to main content

Toggle specific element when css class is used multiple times

I have developed my own dropdown module, which works fine so far. However, I have the problem that dropdowns that have the same trigger class open when clicked. How can I focus only on the element that was clicked. I also tried to focus the element using $(this).find, but unfortunately this does not work for me. What exactly am I doing wrong?

$(document).ready(function(){
    $('.trigger-dropdown').on('click', function(){
        $('.filter-dropdown-wrapper').toggleClass('filter-dropdown-active');
        return false;
    });
});

$(document).click(function(){
    if($('.filter-dropdown-wrapper').hasClass('filter-dropdown-active')) {
        $('.filter-dropdown-wrapper').toggleClass('filter-dropdown-active');
    }
});

$('.filter-dropdown-wrapper').click(function(event){
    event.stopPropagation();
});

/* Triggers Checkbox Icon for Dropdowns */

$(".dropdown-items").click(function() {
    $(this).find('.checkbox').toggleClass("checkbox-selected");
  });
.sidebar-filter-wrapper{
    padding-top:1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-dropdown{
    position: relative;
}

.filter-label{
    font-size: .875rem;
    line-height: 1.375em;
    border: 1px solid #E2E2E2;
    border-radius: 50px;
    padding: 0.5rem 1.25rem;
    position: relative;
    cursor: pointer;
    transition: background-color ease 250ms;
}

.filter-label:hover{
    background-color: rgba(226, 226, 226, 0.20);
    color: #303030;
}

.filter-label img{
    margin-left: .625rem;
}

.filter-dropdown-wrapper{
    margin-top:.625rem;
    display: none;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
    background-color: #fff;
    padding: 1.25rem;
    position: absolute;
    top: 2.5rem,;
    left: 0;
}

.filter-dropdown-active{
    display:flex;
    flex-direction: column;
}

.dropdown-items{
    font-size: .875rem;
    line-height: 1.375em;
    margin-bottom: 0.625rem;
    display: flex;
    align-items: center;
}

.dropdown-items:last-child{
    margin-bottom: 0;
}

.checkbox{
    width: 18px;
    height: 18px;
    border: 1px solid #E2E2E2;
    border-radius: 5px;
    margin-right: 0.625rem;
}

.checkbox-selected{
    background-color: #BC9590;
    width: 18px;
    height: 18px;
    border-color: #bc9590;
    background-image: url(../img/checked.svg);
    background-repeat: no-repeat;
    background-position: center center;
}
            <div class="sidebar-filter-wrapper">
                <div class="filter-pill-wrapper">
                    <div class="filter-dropdown">
                        <a class="filter-label trigger-dropdown">
                            Marken vor Ort
                            <img src="img/toggle.svg">
                        </a>
                        <div class="filter-dropdown-wrapper">
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Skinceuticals</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Babor</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Eucerin</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Hermés</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Kérastase</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Clinique</p>
                            </a>
                        </div>
                    </div>
                </div>
       <div class="filter-pill-wrapper">
                    <div class="filter-dropdown">
                        <a class="filter-label trigger-dropdown">
                            Marken vor Ort
                            <img src="img/toggle.svg">
                        </a>
                        <div class="filter-dropdown-wrapper">
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Skinceuticals</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Babor</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Eucerin</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Hermés</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Kérastase</p>
                            </a>
                            <a href="#" class="dropdown-items">
                                <div class="checkbox"></div>
                                <p>Clinique</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Labels:

Comments

Post a Comment

Popular posts from this blog

Confusion between commands.Bot and discord.Client | Which one should I use?

Whenever you look at YouTube tutorials or code from this website there is a real variation. Some developers use client = discord.Client(intents=intents) while the others use bot = commands.Bot(command_prefix="something", intents=intents) . Now I know slightly about the difference but I get errors from different places from my code when I use either of them and its confusing. Especially since there has a few changes over the years in discord.py it is hard to find the real difference. I tried sticking to discord.Client then I found that there are more features in commands.Bot . Then I found errors when using commands.Bot . An example of this is: When I try to use commands.Bot client = commands.Bot(command_prefix=">",intents=intents) async def load(): for filename in os.listdir("./Cogs"): if filename.endswith(".py"): client.load_extension(f"Cogs.{filename[:-3]}") The above doesnt giveany response from my Cogs ...
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more