Show and IDE jquery effect

Asked

Viewed 4,011 times

2

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

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

  • Each Editar is supposed to show the Box_editor who is right behind?

  • is yes Isac. when I click edit 1 the box 1 appears

2 answers

2


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

If you want to show and hide again each time you click then it will be better 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>
<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 3</p>
    </div>
</div>

  • I did not know about next() was using only (this), I got here obg o/

1

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

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

Name the classes. This way when you click on the element with the class .icon-edita it will add the class .slow only him and not at all who has the same class name

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.