I have create custom toggle script to show/hide content but I am getting issue with script.
When I Click to Filter text content will display and when I click to close button again, it will close and re-open. Why this is happening I don't know please some one guide me.
My JSCode:
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
My JSFiddle: Sample
The click is bubbling up, so both event handlers are executed.
You need to stop the propagation
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function (e) {
e.stopPropagation();
$(".rmm2-toggled ul").hide(1000);
});
hey the problem is that ur close button is inside ur toggle event
use this js code instead:
$(".rmm2-toggled .rmm2-toggled-title").click(function (e) {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function (e) {
$(".rmm2-toggled ul").hide(1000);
});
A possible solution would be to try this:
$(".rmm2-toggled").click(function () {
$(".rmm2-toggled ul").show(1000, function(){
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
});
});
Override
<div class="rmm2-toggled-title" >Click to Filter</div>
with this
<div class="rmm2-toggled-title" id="open_filter">Click to Filter</div>
just add ID named "open_filter" which would be unique and close button is not inside this div.
rather adding event to parent div , add click event to its childs
updated Jquery
$("#open_filter").click(function () {
$(".rmm2-toggled ul").show(1000);
});
$("#filter_close").click(function () {
$(".rmm2-toggled ul").hide(1000);
});
