I have a menu with headings. When a heading is clicked, the child menu items will open. I would like to show only the menu that has most recently been clicked. If heading_practice is clicked, and other menus are open, they will slideToggle close. How can I do this?
<div id="pageHeadings">
<div id="heading_practice">
<a href="#">
<p>Practice Areas</p>
</a>
<div class="menu_practice">
<p>test</p>
<p>test2</p>
</div>
</div>
<div id="heading_about">
<a href="#">
<p>About</p>
</a>
<div class="menu_about">
<p>test</p>
<p>test2</p>
</div>
</div>
</div>
$("#pageHeadings div[class^=menu]").hide();
$("#pageHeadings div[id^=heading]").click(function () {
if(!$(this).find('[class^=menu]').is(":visible")) {
$(this).find('[class^=menu]').slideToggle("fast");
}
//if element is clicked, hide all other menus
});
Fiddle
You probably want to perform a slideUp on all the other elements. This can be achieved like so:
$("#pageHeadings div[id^=heading]").click(function () {
var $menu = $(this).find('[class^=menu]');
if ( ! $menu.is(":visible") ) {
$menu.slideToggle("fast");
}
$('[class^=menu]').not($menu).slideUp("fast");
});
Just add this line:
$('[class^=menu]').hide('fadeIn');
Like this:
$(document).ready(function () {
//hide all dropdown menus
$("#pageHeadings div[class^=menu]").hide();
$("#pageHeadings div[id^=heading]").click(function () {
// $(this).find('[class^=menu]').hide();
if (!$(this).find('[class^=menu]').is(":visible")) {
$('[class^=menu]').hide('fadeIn');
$(this).find('[class^=menu]').slideToggle("fast");
}
});
});
That will hide all others before toggling the current one.
Demo
One new line in your click function is all you need (and you can lose the if check):
$("#pageHeadings div[id^=heading]").click(function () {
$("#pageHeadings div[id^=heading]").not($(this)).find('[class^=menu]').slideUp();
$(this).find('[class^=menu]').slideToggle("fast");
});
jsFiddle example
Related
I would like to keep my dropdown opened after a page load. For example if I click on an item(href) into an dropdown, I would like to keep the dropdown opened after the redirection.
I've seen that there is a method jquery named stopPropagation, but it seems that this does not work for me
HTML
<div class="sidenav">
<div class="item_sn">
Groups
</div>
<div class="item_list_body">
<div class="link_sidenav">
<a href="#" class="sub_item">
group 1
</a>
</div>
<div class="link_sidenav">
<a href="#" class="sub_item">
group 2
</a>
</div>
</div>
<div class="item_sn">
Users
</div>
<div class="item_list_body">
<div class="link_sidenav">
<a href="#" class="sub_item">
user 1
</a>
</div>
<div class="link_sidenav">
<a href="#" class="sub_item">
user 2
</a>
</div>
</div>
</div>
JQuery
<script>
$(document).ready(function () {
$('.item_list_body').hide();
$('.item_sn').on('click', function (event) {
var content = $(this).next('.item_list_body')
content.slideToggle();
$('.item_list_body').not(content).slideUp();
});
});
</script>
Solution 1 (not working) :
$(document).on('click', '.sub_item', function (e) {
$(this).parent('.link_sidenav').parent('.item_list_body').toggle();
});
you can use sessionStorage to store the state of the menu and then open the menu on page load by checking the state see below
EDIT
rather than using state of the menu we should save the index of the clicked menu as discussed in the comment so updated my answer
$(document).ready(function () {
//sessionStorage.removeItem('opened');
$('.item_list_body').hide();
if (sessionStorage.getItem('opened') !== null) {
$('.sidenav>div:eq(' + sessionStorage.getItem('opened') + ')').next('.item_list_body').show();
}
$('.item_sn').on('click', function (event) {
var content = $(this).next('.item_list_body');
var elem = $(this);
content.slideDown(0, function () {
sessionStorage.setItem('opened', elem.index());
});
$('.item_list_body').not(content).slideUp();
});
});
Hope it helps
I've got a following html structure:
<a class='support'>Podpořit</a>
<div class='fa'>
<a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'></a>
<a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'></a>
</div>
And this is my javascript code:
$(".support").mouseover(function() {
activeButton = $(this).next();
activeButton.show();
$(this).hide();
});
$(".support").mouseleave(function() {
$(this).show();
$(this).next().hide();
});
I want to show the .fa div on .support hover and if I leave the area, I want to show .support back again. How can I do it? Now it's blinking :-(
Wrap it in a div and do like this,
$(".containerDiv").mouseover(function() {
activeButton = $(this).next();
activeButton.show();
$(this).find(".support").hide();
});
$(".containerDiv").mouseleave(function() {
$(this).find(".support").show();
$(this).next().hide();
});
In your code your are hiding the element itself which in turn cause the mouse leave event to trigger.
Fiddle
$(function() {
$(".support").mouseover(function() {
$(this).children("div").show();
$(this).children("a").hide();
});
$(".support").mouseleave(function() {
$(this).children("div.fa").hide();
$(this).children("a").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="support">
<a>Podpořit</a>
<div class='fa' style="display:none">
<a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'>Random content</a>
<a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'>Random content</a>
</div>
</div>
I added a container because you can't put a mouseleave event on an element you are hiding, because it will trigger as fast as it hides.
I'm very new to jQuery and coding in general and have been trying to get this sidebar to work. When you click on the INFO link a sidebar opens up. As of right now you can only close the sidebar by clicking on the X in the corner, but I want to also be able to close the sidebar when you click in the body area (but not when you click in the sidebar area). I got this to work sort of, but then I wasn't able to open any of my links to view my projects (only the second project, Frankenstein eBook, has a functioning link as of now).
Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
I've seen a lot of similar problems on here but could never quite match it up to mine specifically. Any help would be awesome, and i Thank you!
Here is my site: Josh Diaz Portfolio
And here is a JSFiddle: JSFiddle
My HTML:
<div class="wrap">
<!--Sidebar-->
<!--Info Panel-->
<div class="infoPanel">
<nav class="closeBtn"> X
</nav>
<div class="infoText">
<h2>infoPanel</h2>
<p>Copy goes here.</p>
</div>
</div>
<section class="sidebar">
<div class="sidebarNav">
<nav> <a class="infoLink" href="#">INFO</a>
</nav>
</div>
<div class="content">
<section class="projects">
<div class="wrapper">
<ul class="grid">
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Images Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
</ul>
</div>
</section>
</div>
</section>
My JS:
$(document).ready(function () {
var menu = "close";
$('.infoLink').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
$('.closeBtn').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
});
Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
Because $('.closeBtn') is referring to div and not the link, use $('.closeBtn a') instead.
Anyway, heres another Quick and dirty way ( needs a bit of refactoring ) but the idea is there. I'll add comments to this if it works for you: http://jsfiddle.net/Varinder/RfFSv/
$(document).ready(function () {
var menu = "close";
var $infoLink = $(".infoLink");
var $infoPanel = $(".infoPanel");
var $closeButton = $(".closeBtn a");
var $document = $(document);
$infoLink.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("open");
});
$closeButton.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("close");
});
$document.on("click.nav", function(e) {
if ( !$infoPanel.is(e.target) && $infoPanel.has(e.target).length === 0 ) {
sidebar("close");
}
});
function sidebar(action) {
if (action == "open") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else if (action == "close") {
console.log("stuff");
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
}
});
You can try something like this:
Your HTML
<body>
<div id="content"></div>
<div id="sidebar"></div>
</body>
And your JS
$('body').click(function(){
$('#sidebar').hide(); //hide sidebar when body is clicked
});
$('#sidebar').click(function(e){
e.stopPropagation(); //this call will cancel the execution bubble
});
I hope this help.
i have some menu in my website with same element , i want to use slideDown in jQuery to slidedown only clicked menu
but now when i clicked one menu all menu get slidedown
HTML
<div id="sidebar-right" >
<div class="sidebar-menu">
<span class="sidebar-post">Last Posts</span>
<span class="sidebar-post-slide">+</span>
<div style="margin-top:-35px"></div>
<div class="sidebar-text">
Some content
</div>
</div>
<!-- S2 -->
<div class="sidebar-menu">
<span class="sidebar-post">Last Comments</span>
<span class="sidebar-post-slide">+</span>
<div class="sidebar-text">
Some content
</div>
</div>
<!-- End S2 -->
</div>
and jQuery side
$(function() {
$('.sidebar-post-slide').click(function () {
if ( $('.sidebar-text').is( ":hidden" ) ) {
$('.sidebar-text').slideDown(800);
} else {
$('.sidebar-text').hide(800);
}
});
});
You need to slidedown the sibling sidebar-text element, not all sidebar-text elements
$(function() {
$('.sidebar-post-slide').click(function () {
//find the sibling sidebar-text element and complete any queued animations
var $stext = $(this).siblings('.sidebar-text').stop(true, true);
if ( $stext.is( ":hidden" ) ) {
$stext.slideDown(800);
} else {
$stext.hide(800);
}
});
});
Demo: Fiddle
Another option is to use the method closest(). But in your case Arun's anwser is better.
In my html code there are list items. I want to show and hide related fav div when hover the related list item. But i can not relate fav div and it's list item.
html:
<ul>
<php? for(....): ?>
<li>
<div id="sin">
some stuff
</div>
<div id="son">
some stuff
</div>
<div id="fav">
something
</div>
<br />
</li>
<php? endfor; ?>
</ul>
when mouse over <li> tags "fav" div which belongs to mouse overed list item has to appear.
My unworked jquery code:
$(document).ready(function()
{
$("li").hover(function(){
$("#fav").show()},
function () {
$("#fav").hide()
});
});
The problem is that you are using same id multiple times. You need to use class="fav" instead of id="fav"
//for #sin and #son also
$(document).ready(function()
{
$("li").hover(function(){
$("#fav").show()},
function () {
$("#fav").hide()
});
});
should be
$(document).ready(function()
{
$("li").hover(function(){
$(this).find(".fav").show()},
function () {
$(this).find(".fav").hide()
});
});
here you have
$(document).ready(function()
{
$('.fav').hide();
$("li").hover(function(){
$(".fav",$(this)).show()},
function () {
$(".fav",$(this)).hide()
});
});
you need to use the context with $(".fav",$(this)). instead of $(".fav")..
Also you've to change from id to class like
<li>
<div class="sin">
some stuff
</div>
<div class="son">
some stuff
</div>
<div class="fav">
something
</div>
<br />
</li>