How to make events for the appropriate div?

Question

It is necessary to make the corresponding div appear by clicking on the link. Here is the markup:

 <div class="settings-line"> <p class="settings-label">Имя</p> <a href="#" class="edit-settings">Редактировать</a> <div class="sett-drop"> <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено"> <div class="form-row"> <label>Имя</label> <input type="text" class="t-inp" name="first_name"/> <div class="text-error"</div> </div> </div> </div> <div class="settings-line"> <p class="settings-label">Фамилия</p> <a href="#" class="edit-settings">Редактировать</a> <div class="sett-drop"> <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено"> <div class="form-row"> <label>Фамилия</label> <input type="text" class="t-inp" name="first_name"/> <div class="text-error"</div> </div> </div> </div>

The intelligence was enough only for such a code, but in this case all the inputs appear at once

 jQuery(".edit-settings").click(function () { if($('.sett-drop').is(":visible")){ $('.sett-drop').hide("fast"); }else { $('.sett-drop').show("fast"); }; });

How to make it so that when you click on a link to open exactly the div that you want? Assigning id not an option, since there are quite a lot of such blocks.

Accepted Answer · 2016-10-05T07:38:55

A little bit corrected code and:

 $(".edit-settings").click(function () { var $this = $(this), wrap = $this.closest('.settings-line'), drop = wrap.find('.sett-drop'); if(drop.is(":visible")){ drop.hide("fast"); }else { drop.show("fast"); } });

 .sett-drop { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="settings-line"> <p class="settings-label">Имя</p> <a href="#" class="edit-settings">Редактировать</a> <div class="sett-drop"> <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено"> <div class="form-row"> <label>Имя</label> <input type="text" class="t-inp" name="first_name"/> <div class="text-error"></div> </div> </form> </div> </div> <div class="settings-line"> <p class="settings-label">Фамилия</p> <a href="#" class="edit-settings">Редактировать</a> <div class="sett-drop"> <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено"> <div class="form-row"> <label>Фамилия</label> <input type="text" class="t-inp" name="first_name"/> <div class="text-error"></div> </div> </form> </div> </div>

PS: A small algorithm (it helps me) -> Take the link to which we click $ (this) -> for it we find the wrapper in which it is located ( .settings-line ) -> in this wrapper we find the container that is hidden \ revealed and working with him.

Answer 2 · 2016-10-05T07:32:36

 $('.edit-settings').click(function(event) { event.preventDefault(); var slidePanel = $(this).next(); $('.sett-drop').not(slidePanel).slideUp(400, function() { slidePanel.slideDown(); }); });

 .sett-drop { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="settings-line"> <p class="settings-label">Имя</p> <a href="#" class="edit-settings">Редактировать</a> <div class="sett-drop"> <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено"> <div class="form-row"> <label>Имя</label> <input type="text" class="t-inp" name="first_name" /> <div class="text-error"></div> </div> </form> </div> </div> <div class="settings-line"> <p class="settings-label">Фамилия</p> <a href="#" class="edit-settings">Редактировать</a> <div class="sett-drop"> <form action="/user/settings/change-fio" method="POST" ajax-form="Успешно изменено"> <div class="form-row"> <label>Фамилия</label> <input type="text" class="t-inp" name="first_name" /> <div class="text-error"></div> </div> </form> </div> </div>

Well, usually they do it so that there is an opportunity to hide the block.

How to make events for the appropriate div?

2 answers 2

More articles: