All of JQuery SlideToggle are opening when I clicked one toggle

Question

HTML

//FIRST TOGGLE
       <div class='dropdown-cus' type='button'>
            <div class='slidx'>
                <span>MENU<i class='fas fa-plus'></i></span>
            </div>
            <div  class='mfields hidden h-label'>
                <label >NAME:</label><input type='text' value=''  name='' class='re_'>
                <label >URL:</label><input type='text' value='LINK HERE'  name='' class='' >
                <input type='hidden' value='' class='input-text' name=''>
            </div>
        </div>
//SECOND TOGGLE
        <div class='dropdown-cus' type='button'>
            <div class='slidx'>
                <span>MENU<i class='fas fa-plus'></i></span>
            </div>
            <div  class='mfields hidden h-label'>
                <label >NAME:</label><input type='text' value=''  name='' class='re_'>
                <label >URL:</label><input type='text' value='LINK HERE'  name='' class='' >
                <input type='hidden' value='' class='input-text' name=''>
            </div>
        </div>

JS

$(document).ready(function(){     
        $(document).on('click','.slidx',function(){
            $(".mfields").slideToggle( 'slow', function() {});
        });
});

HERES THE JS FIDDLE : http://jsfiddle.net/d2tcmqpo/2/

So I have two slide toggle please check the js fiddle so you can see, what I want to happen is if I click the first toggle then it will open, but the problem is when I click the first toggle the second toggle also opens.

I know I can solve this by using different class names per toggle. But I dont want that way, why? because if I will have 100 toggles then I will have to code 100x of my current JQUERY code like this one.

$(document).on('click','.slidx_1',function(){
                    $(".mfields_1").slideToggle( 'slow', function() {});
                });
$(document).on('click','.slidx_2',function(){
                    $(".mfields_2").slideToggle( 'slow', function() {});
                });
$(document).on('click','.slidx_3',function(){
                    $(".mfields_3").slideToggle( 'slow', function() {});
                });

and so on.

I am thinking that maybe I should use the jquery $(this) but it is also doesnt work.

Is there any way to solve this? Or I have no choice but to use different class per toggle?

Answer 1

You need to perform a contextual lookup to find the slide related to the other element. See the comments in the snippets below.

$(document).ready(function(){     
    $(document).on('click','.slidx',function(){
        //this selects all the mfields on the page, not just the one you want to slide.
        $(".mfields").slideToggle( 'slow', function() {});
    });
});



$(document).ready(function(){     
    $(document).on('click','.slidx',function(){
        //this version will find the parent dropdown-cus of the slidx and mfields,
        //and then find the mfields inside it, and only that one
        $(this).closest('.dropdown-cus').find(".mfields").slideToggle( 'slow', function() {});
    });
});