I have a footer list:
<footer id="footer">
<ul>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xxx</p>
<p> xxxx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx </p>
<p> xx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx</p>
<p> xxx</p>
</li>
</ul>
</footer>
that pops out on click to two separate links, like so:
$(document).ready(function() {
$( "#add" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
$(document).ready(function() {
$( "ul li:eq(3)" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
I would like these ul boxes, after their current popout link is clicked, to either fill with content one after the other in order, or have the boxes themselves pop out one at a time. Input wherever I can do better is helpful as well; I'm a rookie. Bonus: how to have the boxes revert in order when those two links in question are clicked again to close? Thanks all.
edit: the two links that pop out the footer are here, the contact link and the phone image:
<section id="side">
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
</section>
Something like this maybe?
$(document).ready(function() {
var $footer = $("#footer").hide(),
$footerItems = $footer.find("ul li").hide(),
footerState = 0;
$("#add, .sidebar ul li").click(function (e) {
e.preventDefault();
footerState = !footerState;
var method = footerState ? 'show' : 'hide';
if(footerState) $footer.show();
$footerItems.get().reduce(function (p, li) {
return p.then(function() {
return $(li)[method]('slow').promise();
});
}, $.when()).then(function() {
if(!footerState) $footer.hide();
});
});
});
DEMO
https://jsfiddle.net/m173gxvg/3/
Something like this? If yes, here are the modifications:
Remove the display:none from the footer css
Add the display:none to the footer ul li css
Modify the javascript code
Here's the js to use after the click:
toggleTimer=500;
$( "#footer" ).find("ul").find("li").each(function() {
jQuery(this).toggle(toggleTimer);
toggleTimer=toggleTimer+500;
});
I think you want to click on each one and then show the next one, is that right?
Then you can use the .next() jquery property to assign the click listener to toggle the next element.
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(function() {
//if none are visible, show the first one, else hide them all
if ($('#footer').find('li').first().css('display') == 'none' ) {
//show the fist LI
$( "#footer" ).find('li').first().toggle( "fast" );
} else {
//hide them all
$('#footer').find('li').hide();
}
});
//add listener to each LI to toggle the NEXT one
$('#footer').find('li').click(function(){
$(this).next().toggle("fast");
});
});
... after your comment...
OR You can show the FIRST hidden one on each click like this:
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(
function() {
//if NO LI are hidden, hide them all, else show one at a time
if ( $('#footer').find('li:hidden').size()==0 ) {
//hide them all
$('#footer').find('li').hide();
} else {
//show the first hidden LI
$('#footer').find('li:hidden').first().show('fast');
}
}
);
});
Is that what you're looking for?
Related
below is my jquery code for a dropdown menu :
$(function(){
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".menu").toggle();
});
var ww = document.body.clientWidth;
if (ww < 1000) {
$(".toggleMenu").css("display", "inline-block");
$(".menu").hide();
$(".menu ul li a").click(function() {
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".menu li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
})
what i am trying to do is add the class "hover" to the "li" of the clicked "a" so that the drop down menu works properly on mobile deivices(device with less than 1000px in my case). but with the code above, i need to click twice to any "a" element for the dropdown to apper, as far as i am concerned when i click on "a" element, the class "hover" should be added to its parent "li" element and the hidden "ul" under it should be shown(because i have written the css in that manner) but at the moment i should click on the "a" element two times(not double click).The html structure is like:
<ul>
<li>
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
</ul>
I have worked on the below code to control a series of 3 sidebars. As you can see, the code isn't particularly efficient as I've simply repeated the content for each class. I'd like to streamline this if possible to just one function?
I'd also like to add the functionality of only ever allowing one sidebar to be active. So if sidebar .artists is .active and I click sidebar .about, the .artists sidebar will collapse.
Thanks.
JQuery
$(function() {
$( ".artists" ).click(function() {
$( ".sidebar.artists" ).toggleClass( "active" );
});
});
$(function() {
$( ".about" ).click(function() {
$( ".sidebar.about" ).toggleClass( "active" );
});
});
$(function() {
$( ".history" ).click(function() {
$( ".sidebar.history" ).toggleClass( "active" );
});
});
HTML
<nav>
<ul>
<li class="artists"><a>Artists</a></li>
<li>News</li>
<li class="about"><a>About</a></li>
<li class="history"><a>History</a></li>
</ul>
</nav>
<nav class="sidebar artists">
Sidebar Artists content
</nav>
<nav class="sidebar about">
Sidebar About content
</nav>
<nav class="sidebar history">
Sidebar History content
</nav>
You can use this to optimize it:
$(function() {
$( ".sidebar" ).click(function() {
$(this).toggleClass( "active" );
$(".active").toggleClass( "active" );
});
});
As per markup code I would suggest you to add an ID to the main ul as main-nav:
$(function() {
$( "#main-nav li" ).click(function() {
var cls = this.className;
$(this).addClass( "active" )
.siblings("li").removeClass( "active" );
$(".sidebar."+cls).slideToggle()
.siblings(".sidebar").slideUp();
});
});
$('.artists, .about, .history').click(function() {
var subClass = '';
if($(this).hasClass('artists')) {
subClass = 'artists';
} else if($(this).hasClass('about')) {
subClass = 'about';
} else if($(this).hasClass('history')) {
subClass = 'history';
}
$('.sidebar:not(.'+subClass+')').removeClass('active');
$('.sidebar.'+subClass).toggleClass('active');
});
https://jsfiddle.net/aua0wxm9/3/
As you have given the markup, I have changed my code.
Try this:
I have checked this code and it works properly
JS
$(document).ready(function(){
$('ul li').on('click',function(){
$('.sidebar').hide();
$(this).parent().parent().siblings("." +$(this).attr('class')).show();
});
});
Alternatively using active class
$('ul li').on('click',function(){
$('.sidebar').removeClass('active');
$(this).parent().parent().siblings("." +$(this).attr('class')).addClass('active');
});
Here's the fiddle example:
http://jsfiddle.net/5angwsnb/3/
Hope it works well for you too!
Update:
CSS:
.sidebar{
display:none;
}
.active{
//your transition here
}
I am trying to style div and ul to function like . However, I have a problem that:
1) I only want to toggle the ul that I click and hide the other ul. So I wonder if jquery support some function such as 'not click'?
2) I want to hide all the ul when the mouse is click outside. I did some research, and see other people use mouseup or click on body. But I am not quiet sure how it works.
$(document).ready(function() {
$('.hide').each(function() {
$(this).hide();
});
$('.select').click(function() {
var id = '#' + $(this).attr('id');
var sub = id + '_sub';
$(sub).slideToggle();
});
$('body').mouseup(function() {
if($(this).length == 0) {
$(this).hide();
}
});
});
div.select {
display: inline-block;
margin: 10px;
padding: 20px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="1" class="select">
<div class="main">
<span>1</span>
</div>
<div>
<ul id="1_sub" class="hide">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div id="2" class="select">
<div class="main">
<span>1</span>
</div>
<div>
<ul id="2_sub" class="hide">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<div id="3" class="select">
<div class="main">
<span>1</span>
</div>
<div>
<ul id="3_sub" class="hide">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</body>
here you go: DEMO
$(document).ready(function() {
$('.hide').hide(); //hide in the beginning
$('.select').click(function() {
$('.hide').slideUp(200); //hide all the divs
$(this).find('.hide').slideDown(200); //show the one that is clicked
});
$(document).click(function(e){
if(!$('.select').is(e.target) || !$('.select').has(e.target)){ // check if the click is inside a div or outside
$('.hide').slideUp(200); // if it is outside then hide all of them
}
});
});
you can define your notClick() function as below:
$.fn.notClicked= function(clickPosition){
if (!$(this).is(clickPosition.target) && $(this).has(clickPosition.target).length === 0){
return true;
}
else{
return false;
}
};
and then use it as:
$(document).click(function(e){
alert($('.select').notClick(e)); // will return true if it is not clicked, and false if clicked
});
You need to hide other ul whenever some one clicks on .select div.
Here is a working fiddle: http://jsfiddle.net/0mgbsa0b/1/
$(document).ready(function() {
$('.hide').each(function() {
$(this).hide();
});
$('.select').click(function() {
$('.hide').each(function() {
$(this).hide();
});
var id = '#' + $(this).attr('id');
var sub = id + '_sub';
$(sub).slideToggle();
});
$('body').mouseup(function() {
if($(this).length == 0) {
$(this).hide();
}
});
});
I'm interested in two concerns you raised, so i will be trying to share some ideas on them:
1）So I wonder if jquery support some function such as 'not click'?
personally, to quesiton1
i think there is no jQuery event method called .noclick()
PPL often use addClass & removeClass to log whether an element got clicked and after marking the element with class="active" , using jQuery selector to select ".active" or using jQuery ":not" selector to select elements that are not marked ".active" ( indirectly finding out those unclicked.)
3.You might also need to count in click propagation issues. meaning sometimes you click a children container and triggered click event towards all its parent inside.
fiddle link: `http://jsfiddle.net/hahatey/ctp5jngf/2/`
In the above case , if you clicked child box in red, will by default alert1, alert2 if
you didn't apply a e.stopPropagation() to the click event;
2) I want to hide all the ul when the mouse is click outside. I did some research, and see other people use mouseup or click on body. But I am not quiet sure how it works.
for question 2:
could be many many ways to do it, you can try blur() //lose focus event trigger.
like what you mentioned mouseout, mouseup, add click event listener to outer area all will work for it as long as u can use method in answer1. i see other ppl have posted many answers already as it can be done in many ways.
I have the following dropdown that opens when the mouse hovers it:
Now is it possible to open the same dropdown when the user highlights it via the tab key.
I've tried learning from this: Selecting div in custom dropdown using Keyboard (Up, down and enter keys)
But this not seems to be working.
Thanks to anyone who can help!
HTML:
<div class="choose_language">
<a class="btn_choose_language" href="#" title="Change language">
<abbr title="English">EN</abbr>
<img alt="" height="11" src="/assets/nav_btn_choose_language.png" width="15">
</a>
<ul class="radius5" style="overflow: hidden; display: none;">
<li>
<a href="/jobs?locale=fr">
<abbr title="Français">FR</abbr>
</a>
</li>
<li>
<a href="/jobs?locale=nl">
<abbr title="Nederlands">NL</abbr>
</a>
</li>
</ul>
</div>
JS:
$(document).ready(function () {
/* =============================================================================
PORTAL NAV -> highlight clicked element + show/hide and equalize heights of Main Nav level 2
========================================================================== */
$('header nav#nav > ul li a h3, header nav#nav-mystib > ul li a h3').click(function(e) {
e.stopImmediatePropagation();
//alert($(this).html())
if(e.target != this) return;
//hide choose_language box
$('.choose_language').children('ul').hide();
//hide every context box except clicked one
$('.context_box').not($(this).parent().parent().children('.context_box')).fadeOut(100);
//hide more_info box and .my_space box if open
$('.my_space .more_info_box, .my_space .opened').hide();
//show/hide THIS context box
$(this).parent().parent().children('.context_box').fadeToggle(0);
//set level2 columns at same height
$(this).parent().parent().children('.context_box').children(".level2_links").children(".col:lt(5)").equalHeights();
$(this).parent().parent().children('.context_box').children(".level2_links").children(".col:gt(4)").equalHeights();
//reset the selected item
$('#nav_item li').removeClass('selected');
//select the current item
$(this).parent().parent().addClass('selected');
});
/* =============================================================================
NAV -> highlight clicked element
========================================================================== */
$('header nav#nav-mystib > ul li a h3').click(function() {
//reset the selected item
$('#nav-mystib_item li').removeClass('selected');
//select the current item
$(this).parent().parent().addClass('selected');
});
// Nav -> show/hide language selector
$('.choose_language').hover(function() {
if (detectmob()) { return;}
$('.choose_language ul').slideToggle(200)
});
/* open mySpace*/
$('.my_space .closed').click(function() {
$('.my_space .opened').show()
return false;
});
/* close mySpace*/
$('.my_space .opened .btn_close').click(function() {
$('.my_space .opened').hide();
return false;
});
$('.my_space .info').click(function(e) {
e.stopImmediatePropagation();
//hide choose_language box
$('.choose_language').children('ul').hide();
//hide every context box
$('.context_box').hide();
$('.my_space .more_info_box').fadeToggle(200)
});
// Hide context_box, .more_info_box when click outside of it
$(".context_box, .more_info_box").bind( "clickoutside", function(){
$(this).hide();
});
$(".choose_language").bind( "clickoutside", function(){
if (detectmob()) { return;}
$(this).children('ul').hide();
});
// Hide context_box, .more_info_box when mouse is outside of it
$(".context_box, .more_info_box").hover(function(){
var el=this;
$(el).stop(true,false)
},function(){
var el=this;
$(el).delay(700).hide(10)
});
});// end of dom ready
you can do it like this:
You check if the element got focus, and then show it via jQuery.
You can also use blur to check if the element lost focus and hide the drop-down (I added the class last to the last li element, you can do it in a variety of ways).
<a href="/jobs?locale=nl" class="last">
$(document).ready(function () {
$( ".btn_choose_language" ).focus(function() {
$( ".radius5" ).show();
});
$( ".last" ).blur(function() {
$( ".radius5" ).hide();
});
});// end of dom ready
I would like to click on "Fruit" and have the list appear. However when I click on "Fruit" now, my list of fruits appear but it never dissappears. When I click on the next link "Vegetables", fruit disappears, but now Vegetables won't dissaper even if I click somewhere else on the screen or move the mouse.
$('.menuBar div ul li').click(function() {
$('.menuBar div').hide();
});
function showHideMenu( elem ) {
$('.menuBar div').each( function () {
if ( $(this).hasClass('sub' + elem) ) {
$(this).css('height','0px');
$(this).css('display','inline-block');
$(this).animate({
height: '+=200'
},'slow');
} else {
$(this).css('display','none');
}
});
}
HTML
<html>
<div class="menuBar">
<ul>
<li onclick="showHideMenu('Fruit');">
<span class="fruit"></span>Fruit
</li>
</ul>
</div>
</html>