CODEWITHSUNDEEP
jqueryhtmlcss
HenryM
HenryM

Reputation: 5793

Get next <div> with specific class and remove a class

I'm trying to write some jQuery so that when a <div> with a specific class (form-field) is selected, a subsequent <div>, with a different class (form-field-dropdwon) has another css class (hide) removed.

This is the html

             <div class="col-sm">
                <h2 class="section-title">
                  Header                    </h2>
                <input type="hidden" name="" value=""  />
                <div class="form-field">
                  Header <i class="fa fa-caret-down orange"></i>
                  <div class="form-field-dropdown hide">
                    <div class="select-option selected">
                      Option
                    </div>
                    <div class="select-option">
                      Option
                    </div>
                    <div class="select-option">
                      Option
                    </div>
                    <div class="select-option">
                      Option
                    </div>
                    <div class="select-option">
                      Option
                    </div>
                  </div>
                </div>

And this is the jQuery I'm using:

<script>
    $(".form-field").click(function() {
        $(this).next().find(".form-field-dropdown").removeclass('hide');
    });
</script>

I've tried various versions of this but don't seem able to select the <div> I'm after. Can you help?

Upvotes: 0

Views: 927

Answers (4)

cloned
cloned

Reputation: 6742

There is no next() Element in your example code. Based on the structure of your code it looks like you want to find the form-field-dropdown directly inside the form-field class.

So the correct JS would be: $(this).find(".form-field-dropdown").removeClass('hide')

Does this solve your issue?

Upvotes: 2

Alexander N. Morgunov
Alexander N. Morgunov

Reputation: 166

.next() is excess here. You just need to find child in this div:

$(".form-field").click(function() {
    $(this).find(".form-field-dropdown").removeClass('hide');
});

If it still doesn't work as expected so check up CSS to find some errors there. And check in Elements inspector, what happens inside your html.

Upvotes: 0

charan kumar
charan kumar

Reputation: 2157

Your form-field-dropdown div is not the next sibling, so next() wont work,

Use find function to achieve this, so that it will find ".form-field-dropdown" inside the parent ".form-field"

<script>
    $(".form-field").click(function() {
        $(this).find(".form-field-dropdown").removeClass('hide');
    });
</script>

Also its removeClass(), not removeclass(). C is in caps

Upvotes: 3

Programmer
Programmer

Reputation: 2123

next() gives you the next sibling of the element, which is not what you want. You want to find the element inside the current element (this). Just remove next() and it should work.

<script>
    $(".form-field").click(function() {
        $(this).find(".form-field-dropdown").removeclass('hide');
    });
</script>

Upvotes: 1

Related Questions