Develop Reference

Show / hide div button

I'm trying to do a show / hide menu button using jQuery.
The menu is contained in a div, and I am trying to setup a button to show and hide it. Here's my code:
<div class="menu">
<div id="items">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<p class="dismiss-btn" id="btn-hide"><i class="fa fa-bars"></i></p>
</div>
JS:
<script>
//DOM loaded
$(document).ready(function() {
// Hide the top info bar
$('#btn-hide').click(function(){
$("#items").toggle("slow");
});
});
</script>
The problem is when I click the button, it hides the content, and then it shows it again... Any idea where I'm wrong?

This works fine for me but one thing you could try:
$('#btn-hide').click(function(e){
e.stopImmediatePropagation();
$("#items").toggle("slow");
});
This will stop any other "clicks" on that element or parent elements.
http://api.jquery.com/event.stopimmediatepropagation/

How to avoid hiding section that shouldn't hide?

Here's the demo of what I've got until now.
What I'm trying to reach is to have a list of info hidden just to be shown whenever you click on it.
It all consists on a ul list with ul children nested inside of its li elements and so.
Until now it does what it should: Hides or shows the ul child when you click on a li parent.
But the problem is that when I click on a li inside a ul which is already inside a li, this parent ul hides.
How can I avoid this to happen? Is there a better way of doing this?
I'm not really that new to js but I'm still learning and I would like to see what you, guys, can teach me.
Thanks in advance.
PD: If it is not too much to ask, I would really a appreciate a pure js answer so I can learn more of it (:

Your issue arrises from event propagation. What was happening in your fiddle was that when the child was clicked the event was also propagating to the parent and hiding the whole thing. Thats why you might notice that the second time the parent li was opened the child would be open also. Here is a link to an explanation of the different ways events propagate in different browsers.
For everything but IE version <9. This modification to your fiddle should make your code work. The only difference being that I am stopping the event from propagating from your child li to the parent li, with
event.stopPropagation();
Check out Mozilla's event.stopPropagation docs for more info.

<div class="clpsble-area">
<ul onclick="clpsble(event)">
<li class="collapser">Rand Stuff 1
<div class="clpsble-sec hide">
<ul>
<li class="collapser">Rand Stuff 1.1
<div class="clpsble-sec hide">
<ul>
<li>Rand Stuff 1.1.1</li>
<li class="collapser">Rand Stuff 1.1.2
<div class="clpsble-sec hide">
<ul>
<li>Rand Stuff 1.1.2.1</li>
<li>Rand Stuff 1.1.2.2</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Rand Stuff 1.2</li>
</ul>
</div>
</li>
<li>Rand Stuff 2</li>
</ul>
</div>
<script>
function clpsble(e){
for(el in e.target.children)el.style.display=el.style.display==='hidden'?'block:'hidden';
}
</script>

Change image in "slider" on hover li

I'm trying to create a "Slider" wich change the image when hovering over an li element. If you click on the link beneath you can see what i mean.
http://www.ing.nl/particulier/
<div id="infobyimage">
<div class="nav-blocks">
<ul class="nav">
<li> Geschilderd huis</li>
<li> Steiger</li>
<li> Houtrot pillen</li>
</ul>
</div>
<div class="slider">
<ul>
<li><img src="images/DSC00742-slide.png" alt="Geschilderd huis"/></li>
<li><img src="images/DSC00752-slide.png" alt="Geschilderd huis"/></li>
</ul>
In the HTML above you can see that i'm trying to achieve the same as on the link. Can someone please explane how to do this with jquery or just CSS?
Thanks.

You need to do a .hover(function(){//content}); on the element that you want to change for example if you wanted a function for hovering over one element you would do:
$('.element').hover(function(){
$('.another_element').fadeOut(100);
});
This function says that when you hover over a div that has a class of element, it make another div that has a class of another-element .fadeOut() at 100 milliseconds and make the opacity of another-element 0. For this snippet of JQuery to work though you need to add an ajax file

Maybe this will help you Demo
I change the img attribute when I hover particular li i.e.
$("ul li:nth-child(1)").hover(
function () {
$('#changeImage').attr('src','source');
});

Creating navigational pages with jquery

I actually didn't really know how to phrase the question title, but here is the description. Suppose I'm using jQuery to show/hide uls that are stacked on top of each other (absolutely positioned). For example:
<ul id="one">
<li>blah</li>
<li>blah2</li>
</ul>
<ul id="two">
<li>blah</li>
<li>blah2</li>
</ul>
I have a controller button, that when pressed, simply changes the z-index of these uls. The controller button is literally just:
My button
With jQuery code that does: (I'm using the jQuery cycle plugin)
$('#mybutton').click(function() {
// check which ul is currently shown
// change z-index, so that the next ul is to be shown
});
THE QUESTION:
In my site, I have several pages that I would like to point to the second ul, so that when clicked, it'll bring them to the page with all of the uls, but only the second one will be shown. It would be the same if the person went to the page, had the default first ul shown, and then clicked "next" to proceed to the next ul. I am simply wondering if it's possible to avoid pressing "next", and just bring the user directly to the page and have the second ul shown.

I think you can use the hash-tag from the URL. You can then write an if statement like this:
if(location.hash === "#2"){
$("#one").hide();
}else{
$("#two").hide();
}
Or directly as a copy and paste example:
<html>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
if(location.hash === "#2"){
$("#one").hide();
}else{
$("#two").hide();
}
$('#mybutton').click(function(e) {
$("ul").toggle(); //quick n dirty! only works with 2 lists :)
e.preventDefault();
});
});
</script>
<body>
My button
<ul id="one">
<li>First Item!</li>
<li>blah</li>
<li>blah2</li>
</ul>
<ul id="two">
<li>Second Item!</li>
<li>blah</li>
<li>blah2</li>
</ul>
To second page (you might have to refresh, notice the #2 at the end of the url!)
​</body>
</html>
Also notice I've inserted a e.preventDefault(); at #mybutton's click listener to prevent the URL changing back on clicking.

If I am understanding you correctly, perhaps you can accomplish this via a page wrap with a unique id per page? You can swap the id out with JS or server side logic, depending on what you're trying to do.
<div id="page-one">
<ul id="one">
<li>blah</li>
<li>blah2</li>
</ul>
<ul id="two">
<li>blah</li>
<li>blah2</li>
</ul>
</div>
then your css will be #page-one #one { display:block }; #page-two #one { display : none }; etc.

jQuery collapsing list?

Check out http://jqueryui.com/demos/draggable/
At the bottom there's a tabbed section. The seconds tabs "Details" gives the example of exactly what I want to accomplish. You can show/hide each row, and you can show/hide the details within that list row.
Is this part of the jQuery UI? If so, does anyone happen to know what it's called?

It is part of jQuery. It is just a simple hide and show on another div.
<div class="Control">Toggle</div>
<div class="Content" style="display: none;">Some content you want to toggle.</div>
<script>
$(".Control").click(function(){
$(this).next(".Content").toggle();
});
<script>
Your elements can change to anything you want, LI, IMG, DIV.

here is a simple accordion
if you don't want them all to hide. remove this line $('.contentblock').not(c).hide();
<ul id="accord">
<li>
title
<div class="contentblock">Content</div>
</li>
<li>
title2
<div class="contentblock">Content2</div>
</li>
</ul>
then ...
$(function () {
$('.contentblock').hide();
$('#accord').delegate('li > a','click',function () {
var c = $(this).parent().find('.contentblock').toggle();
$('.contentblock').not(c).hide();
})
});