We Keep Coding

Unfold Submenu conditions (jQuery)

I'm stuck with a jQuery issue that I don't manage to solve.
I've created a menu with sub menu elements. I would like to toggle the height of content by clicking in menu items. The thing is when I click on other item, the content collapse. Kind of tricky to explain, I've put two websites doing the job
http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/
I guess these two websites are using Shopify.
$(document).ready(function() {
$(".button").on("click", function() {
if($(".content").height() == 0) {
$(".content").animate({height: "300px"});
}
else if($(".content").height() == 300) {
$(".content").animate({height: "0px"});
}
});
});
Here is my jsfiddle
-> Thank a lot in advance.

Here's version of your fiddle that uses the data attribute to target divs with desired content, and another data tag containing desired heights to animate (but there are many other ways).
Clicking on the same button toggles it shut, this is achieved by adding an indicative class.
The 'hiding' divs may contain further divs with classes and layout as required.
$(document).ready(function (){
$(".b").on("click", function (){
var $this = $(this),
target = $this.data('target'),
tall = $this.data('tall'),
content = $(".content");
target = $('.'+target).html(); // get the html content of target divs
content.html(target); // insert said content
if (!$this.hasClass('on')) { // if it hasn't been clicked yet..
$(".b").removeClass('on'); // say that none have been clicked
$this.addClass('on'); // say that just this one has been clicked
content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
} else {
content.animate({height: "0px"});
$this.removeClass('on');
}
});
});
.content {
background: coral;
width: 100%;
height: 0px;
overflow:hidden;
}
.hiding{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>
<div class="content">Le contenu</div>
<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>

jQuery - hide div, then show on click

So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?

slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.

As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you

$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".

Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle

Item hover shows hidden text of all items

I'm using this script to animate/show the hidden text of the item:
/* Artworks Hide/show text */
$(".item").hover(function() {
//fadein second image using jQuery fadeIn
$(".item .art_title").fadeIn(200);
}, function () {
//fadein first image using jQuery fadeIn
$(".item .art_title").fadeOut(200);
});
And this is the HTML:
<div class="item">
<img src="img/artwork1.jpg" alt="artwork1" width="240" height="173">
<div class="art_title">
<p>SWEET LIFE</p>
</div>
<div class="mask"></div>
</div>
The problem is that when I hover over one item, it displays the hidden text of all itmes! How can I fix to display just the text of the item i'm hover?

Try changing it to $(this).find(".art_title").fadeIn(200);
and correspondingly, $(this).find(".art_title").fadeOut(200);
You are currently selecting all elements with class art-title. You want all elements within the hovered one that have class art-title.

Try this:
/* Artworks Hide/show text */
$(".item").hover(function () {
//fadein second image using jQuery fadeIn
$(this).find('.art_title').fadeIn(200);
}, function () {
//fadein first image using jQuery fadeIn
$(this).find('.art_title').fadeOut(200);
});

This happens because you are using classes for selectors in your jQuery code. You could also try:
$('.item').mouseenter(function() {
$(this).find('.art_title').fadeIn(200);
}).mouseleave(function() {
$('.art_title').fadeOut(200);
});

How to show/hide a div on mouseover? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to show/hide a div on mouseover using jquery?
I have a div like this:
<div id="parent">
foo
<div id="child" style="display:none;">
hidden
</div>
</div>
I want to have the child div shown whenever someone moves their mouse over the parent div, and when he moves his mouse away, to hide the parent div.
However if I do this:
$("#parent").mouseover(toggle);
$("#parent").mouseout(toggle);
function toggle()
{
console.log('here');
$("#child").toggle();
}
Then both events seem to get called twice each time i move my mouse over the #parent div. How can I achieve what I want?

$("#parent").hover(
function(){
$("#child").show();
},
function(){
$("#child").hide();
}
)

How about add css?
#parent #child{display:none;}
#parent:hover #child{display:block;}
with
<div id="parent">
foo
<div id="child" >
hidden
</div>
</div>

You shouldn't use toggle in this case. If you always want to hide on mouseout and show on mouseover, then define them as such :)
$("#parent").mouseover(function() {
$("#child").fadeIn(); // or .show() for no fading
});
$("#parent").mouseout(function() {
$("#child").fadeOut(); // or .hide() for no fading
});

Don't use toggle function !!
Try something like this:
$("#parent").hover(function(){
$("#child").show();
}, function(){
$("#child").hide();
}
)
This should probably work!!

Shorter:
$("#parent").hover(function () {
$("#child").toggle();
});​
Demo.
Note: You can subtitute toggle with fadeToggle or slideToggle.

You can try .hover() like this,
$('#divid').hover(
function(){
//mouseenter function
},
function(){
//mouseleave function
}
);

You should use something like this:
$("#parent").mouseover(function(){
$('#child').show();
});
$("#parent").mouseout(function(){
$('#child').hide();
});​
jsFiddle example: http://jsfiddle.net/phcwW/

<div id="parent" onmouseover="callMouseOver()" onmouseout="callMouseOut()">
foo
<div id="child" style="display:none;">
hidden
</div>
</div>
Js Method:
function callMouseOver(){
document.getElementById("child").style.display = "inline";
}
function callMouseOut(){
document.getElementById("child").style.display = "none";
}

When hovering parent div, change bg color of child divs

I have the following setup:
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
I'm trying to change all the background color of all of them at the same time, when the mouse is hovering over any one of them. I tried:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$(this).css('background-color', 'gray');
},
function(){
$(this).css('background-color', 'red');
});
});
</script>
But, the color is not "showing through" the children <div>s.
Is there a way to choose the descendents of "this". I have many of these sets in a row, so I think I need to use "this" so I don't have the call each parent by id. I'm thinking something like this:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$(this "div").css('background-color', 'gray');
},
function(){
$(this "div").css('background-color', 'red');
});
});
</script>
But, can't quite get it to work - all the examples on jquery.com use the id selector... none use "this".
Thanks a lot!

If you're not targeting IE6, no need to use JavaScript, pure CSS will do the trick:
.parent, .child {
background-color:red;
}
.parent:hover, .parent:hover .child {
background-color:gray;
}

have you already tried .children()?
jQuery API

you can use .find()
$(this).find('div').css('background-color','red');
http://api.jquery.com/children/

try this:
$(function() {
$('.parent').hover( function(){
$(this).children("div").css('background-color', 'gray');
},
function(){
$(this).children("div").css('background-color', 'red');
});
});
demo: http://jsfiddle.net/zt9M6/

You're using $() with mixed arguments - it's either got to be a string as a selector (div), or just a DOM element (this). To select all divs within the context of this, try calling it like this:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$("div", this).css('background-color', 'gray');
},
function(){
$("div", this).css('background-color', 'red');
});
});
</script>
From http://api.jquery.com/jQuery/#jQuery1

Do it with CSS classes
.parent .child{
background-color: red;
}
.hoverstyle .child{
background-color: gray;
}
$(.parent')hover(function() {
$(this).addClass("hoverstyle"):
},
function(){
$(this).removeClass("hoverstyle");
});