Show and hide effect jquery

Question

Show and hide effect jquery

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

How do I pro jquery open only the box I clicked, without opening the others. I tried to use $ (this), but I could not. Not the way I want it.

HTML

<div class="main">
    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 1</p>
    </div>

    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 2</p>
    </div>

    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 2</p>
    </div>
</div>

JQuery

$(document).ready(function(){
    $(".icon-edita").click(function(){
        $(".Box_editor").show("slow", function(){});
    });
});

I did not put the css, because it is already correct the problem is in jquery msm. vlw o /

javascript html jquery

asked by anonymous 17.01.2018 / 18:48

2 answers

1

I think you have to use it like this: $(this).find

$('.icon-edita').click(function(){
    $(this).find('.Box_editor').addClass(".slow");
    return false;
});

Check the name of the classes. That way when you click on the element with the class .icon-edita it will add the class .slow only it and not at all that has the same class name

17.01.2018 / 18:58

Display only hours, minutes, and seconds on a chart whose entry is in unix time Find String in ArrayList

score 2 · Accepted Answer

If you want to show Box_editor then every .icon-edita then you must use next() to get to element of the front, which is the box, and in that make show . The way it has with $(".Box_editor").show( ends up showing everyone.

If you want to show and re-hide every time you click then it's best to use toggle instead of show

Example:

$(document).ready(function(){
    $(".icon-edita").click(function(){
        $(this).next().toggle("slow");
    });
});

.Box_editor {
  display:none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="main">
    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 1</p>
    </div>

    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 2</p>
    </div>

    <i class="icon icon-edita">Editar</i>
    <div class="Box_editor">
        <p>Box editor 3</p>
    </div>
</div>