We Keep Coding

Jquery. Hide other elements, except this

I‘m using Pollate Template for creating polls. There is a list of user's created Polls, after clicking 3 dots (menu icon), the dropdown list shows up with the option to delete this poll. If the submenu is shown and you click anywhere on the screen it hiding.
But I found a bug, that if you clicking on another sub-menu icon it not hiding other sub-menus (look at the image below).
It should be hidden when clicking anywhere, even if it's a sub-menu icon of another entry.
There is HTML structure:
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
After clicking a - dropdown shows up.
There is JQuery:
$.puerto_droped = function( prtclick, prtlist = "ul.dropdown" ){
$(prtclick).livequery('click', function(){
var ul = $(this).parent();
if( ul.find(prtlist).hasClass('open') ){
ul.find(prtlist).removeClass('open');
$(this).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
} else {
ul.find(prtlist).addClass('open');
$(this).addClass('active');
if(prtclick == ".pl-mobile-menu") $('body').addClass('active');
}
return false;
});
$("html, body").livequery('click', function(){
$(prtclick).parent().find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
}
prtclick -> .pl-user-options
I think that this function $("html, body").livequery('click', function(){... should be edited, but can't achieve it successfully. I've tried in many ways but failed.
One of my tries was:
$(prtclick).click(function(evt){
$(prtclick).find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
But now it not showing sub-menu at all. I need to make an exception for the current entry. Have you any ideas? Thank you.

Before you check for .open class, you can toggle off all other ul.dropdowns.
$(this).closest('.row').siblings('.row').removeClass('active')
.find('ul.dropdown').removeClass('open');
Get current clicked a main parent which has 'row' class,
get its siblings, remove 'active' class of them,
get all ul.dropdowns inside those siblings and remove 'open' class of those uls

How to run a jQuery function only for child elements?

I'm trying to collapse all child comments including the parent comment when some clicks on the icon nested inside parent comment.
With below jQuery code I was able to get the comments box collapse but now the comments located inside another section are also getting collapsed.
jQuery code -
$('.comment-toggle pre').on('click', function(e) {
$(".single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment ").slideToggle('fast', function() {
if ($(this).is(':visible')) {
$(".comment-toggle pre").text('[–]');
} else {
$(".comment-toggle pre").text('[+]');
}
});
});
$('.comment-toggle pre').on('click', function(e) {
$('.single-comment-wrapper .left-side').slideToggle('fast');
});
Since HTMLand CSS was too long. I've created a codepen. Below is the direct link to it.
https://codepen.io/anon/pen/Vzrvbm
Thanks in advance.

The structure of your divs makes this tricky, I've been playing around on the fiddle for ~10mins and have come up with this - its heading in the right direction but not perfect...
$('.comment-toggle pre').on('click', function(e) {
$(this).parents('.single-comment-wrapper').next().slideToggle('fast', function() {
All the plus and minuses change because currently your code is targeting classes, it needs to change to be relative to the +/- clicked so $(this). etc

Update you jQuery to search elements relative to your clicked element:
$('.comment-toggle pre').on('click', function(e) {
// find main comment element
var rootComment = $(this).closest('.single-comment-wrapper');
// hide child comments of current comment
var children = rootComment.parent().find('>.child-comment');
children.slideToggle('fast');
// hide left part
rootComment.find('.left-side').slideToggle('fast');
// hide current comment
rootComment.find('.comment-text').toggle('fast', function() {
if ($(this).is(':visible')) {
rootComment.find(".comment-toggle pre", this).text('[–]');
} else {
rootComment.find(".comment-toggle pre", this).text('[+]');
}
});
});
Also, if you can change markup to include children elements in the context of the main comment element it would be much more easier to work with. Tree-like view based on ul would simplify markup and reduce amount of HTML elements.

I think, you should use different classes for divs. Because when you click .content-togle class, javascript code executes actions for all .single-comment-wrapper .comment-text, .single-comment-wrapper .comment-bottom, .single-comment-outer .child-comment classes.

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/

Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});

Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

Collapsible Menu Not Staying Open

Hello ive followed the instructions from this webspage Add a Blogger-like collapsible archive block to your Drupal 7 site and suprised myself that everything seems to be 'sort of' working. As you can see from my 'collapsible block' on the right of THIS PAGE that the block doesnt seem to want to stay open when viewing other months. I dont think this was the intended behaviour.
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").children(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
var icon = $(this).children(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});
Could anyone suggest anything to me to make the menu block open on a month when clicked and to close the other 'months'?
thanks

The problem is that the code you have is already added inside the file http://netmagpie.com/sites/all/themes/feverultra/js/feverultra.js and by adding your file after that, you're binding twice to the event and the function toggles twice, so the elements open and close
If you want to only have one month open then you need to close any open months before opening the one that was clicked, something like:
jQuery(document).ready(function($) {
// init: collapse all groups except for the first one
$(".view-collapsible-archive ul").each(function(i) {
if (i==0) {
$(this).siblings("h3").find(".collapse-icon").text("▼");
} else {
$(this).hide();
}
});
// click event: toggle visibility of group clicked (and update icon)
$(".view-collapsible-archive h3").click(function() {
$('.view-collapsible-archive ul:visible').not($(this).next('ul')).slideUp();
var icon = $(this).find(".collapse-icon");
$(this).siblings("ul").slideToggle(function() {
(icon.text()=="▼") ? icon.text("►") : icon.text("▼");
});
});
});

It's because of this line:
$(this).siblings("ul").slideToggle
It says: "toggle the state of all the ul elements using a slide animation"
You will want to change this to slideDown when it's hidden in order to show it and slideUp when it's visible in order to hide it.
I would provide a code sample but I'm typing with one thumb on an iPhone at the moment.

Having trouble maintaining state on custom jQuery menu

Check out the treatments menu on right hand side of this website. It has a set of <dt> tags with an <a> tag and a <ul> list of submenu <li> links inside. The top level link and sumbmenu links are grouped together using the rel attribute.
As you can see the submenu slides down when you click the top level link. What I'm trying to do is maintain state between page loads so that if any of the links in the submenus are clicked it will stay open. I am trying to use the rel attribute to do this.
Here is my code so far, I am getting a bit confused with the logic:
function initMenu() {
$('.menu ul:not(.active)').hide();
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('.menu').each(function () {
var state = $(this).find('a:first-child').attr('rel');
if (state == checkCookie) {
alert(state);
$(this).next().slideToggle('normal');
}
})
}
$('.menu > a:first-child').click(function(e) {
e.preventDefault();
var navIndex = $(this).attr('rel');
$.cookie("nav-item", navIndex);
$(this).next().slideToggle('normal');
});
}
$(function() {
initMenu();
});
EDIT**
I have changed the first part of the code to this in order to try and use the active class. But what its doing is opening all the ul's instead of just the ul that contains the li with the active class.
$('.menu ul:not(.active)').hide();
$('.menu').each(function (){
if ($(this).children(".active")){
$(this).children('ul').slideToggle('normal');
}
});

Update *after update of original question*
Use for the if
if ($(this).find(".active").length){
$(this).children('ul').slideToggle('normal');
}
Original answer
One thing is with
if (state == checkCookie) {
alert(state);
$(this).next().slideToggle('normal');
}
this in this context refers to .menu and not the a link.
You should change it to
if (state == checkCookie) {
alert(state);
$(this).children('ul').slideToggle('normal');
}
The other is that the cookie plugin creates (by default) cookies that belong to the page that created them. So when you change a page it does not have access to a cookie created by another page.
Use the path option when saving $.cookie("nav-item", navIndex, {path: '/'});
The correct way
It would be best though not to rely on cookies for navigation as it will become problematic when a user starts using the back button ..
You should really pass the rel value to the url as the hash #relvalue and use that instead.
(hint: check out window.location.hash)