I have a single page site with content placed inside an accordion. I need to both open and scroll to the accordion item when a user clicks on my nav at the top of the page. I found a couple similar functions, this being the closest (Open JQuery accordion when link with an id of element within the accordion is clicked) but unfortunately the jsfiddle links are no longer working.
Right now I just have thecode to get the accordion working...Need to get the scroll to part in there somehow...Thanks!
Code
var accordion_head = $('.accordion > li > .toggle-bar');
accordion_head.on('click', function (event) {
var $a = $(this);
event.preventDefault();
if ($a.hasClass('active')) {
$a.removeClass('active').siblings('.content-wrapper').slideUp();
}
else {
$a.addClass('active').siblings('.content-wrapper').slideDown();
}
});
.accordion li .content-wrapper {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li id="1">
<a class="toggle-bar" href="#one"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="2">
<a class="toggle-bar" href="#two"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="3">
<a class="toggle-bar" href="#three"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
</ul>
Related
I am designing a widget style using HTML ul tag.
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a></li>
<li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
<li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
<li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
And I have 4 divs.
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
I only want to show the li's href div that has currently been clicked. I only want to use HTML / CSS and jQuery.
This is the basic idea. You can improvise as per your need. I have set the target li's id as data attribute in to div where you will click. Now on click of that div i gets li's id so we can make that shown and all else li hide.
$(document).ready(function(){
$('.tab').click(function(){
$('.tabs li').hide();
var idTab = $(this).data('id');
$('#' + idTab).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a>
</li><li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
</li><li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
</li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>
<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>
Cheers...!!
This can be achieved via the following changes to your HTML, and the addition of the jQuery script below:
<ul>
<!-- add data-target attribute to each "a", with value matching corresponding tab -->
<li>
<a data-target="basic_information" href='#basic_information'>Basic</a>
</li>
<li>
<a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
</li>
<li>
<a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
</li>
<li>
<a data-target="confirm" href='#confirm'>Confirmation</a>
</li>
</ul>
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
<script>
$(function() {
// Hide all tabs by default
$('.tab').hide()
// Assign click handler to all elements with data target attribute
$('[data-target]').click(function() {
// Hide all tabs
$('.tab').hide()
// Extra target id of the menu link that was clicked
var tabToShow = $(this).data('target')
// Show the corresponding tab
$('#' + tabToShow).show()
// Return false to prevent default navigation behaviour of links
return false
})
})
</script>
I need help in automatically closing a toggle-nav menu on mobile. Right now it doesn't close when a menu is selected.
HTML:
<!-- fixed header -->
<header id="navbar-top">
<div class="pt_navbar">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- start menu-->
<div id="main-nav">
<i class="fa fa-bars"></i> Miracle Trainer
<ul class="pt_nav nav">
<li class="active">
Welcome
</li>
<li>
Training Videos
</li>
<li>
Pricing
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- end menu-->
</div>
</div>
</div>
</div>
</header>
JS:
I need a way to close the toggle-nav when a menu is selected.
$("body").on('click', '#toggle-nav', function(e){
e.preventDefault();
var nav_menu = $("#navbar-top .pt_navbar ul");
if( nav_menu.height() < 10 ){
nav_menu.addClass('open_menu');
}else{
nav_menu.removeClass('open_menu');
}
});
I am currently using this for a slide-out menu:
$('.slideout-menu-toggle, .select').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
right: "0px"
});
} else {
slideoutMenu.animate({
right: -slideoutMenuWidth
}, 400);
}
});
Some adjustments might work for you.
EDIT: with the above working code in mind, I think your first jQuery line should be like this:
$('#toggle-nav, .select').on('click', function(e){
and add the "select" class to your list items.
here is the jsfiddle of what im trying to accomplish..
http://jsfiddle.net/#&togetherjs=08LnngLQ1M
im trying to make the content in an html file swap in and out. The java script file is set up to apply the slide function to my div. Please show me what I need to add to the javascript in order to allow the information to swap in and out as well as display appropriately.
first my javascript file then under is the index.html file. also displayed the css in the head in order to show how i am trying to hide the content.
please show me how to implement the javascript i am lacking and then make appropriate changes to my html and css if necessary.
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#navigationMenu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#navigationMenu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
<style type="text/css">
#page1, #page2, #page3, #page4, #page5 {
display: none;
overflow:hidden;
}
</style>
</head>
<body>
<div id="top">
</div>
<!-- The navigation css is in styles.css -->
<div id="main">
<ul id="navigationMenu">
<li>
<a class="home" href="#home">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#about">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="#services">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="#portfolio">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="#contact">
<span>Contact us</span>
</a>
</li>
</ul>
</div>
<!-- The css for the main area is in css.css-->
<!-- The wrapper and the content div control the jquery slide up effect -->
<div id="wrapper">
<div id="content">
<!-- The 5 pages content divs will display in this area -->
</div>
</div>
<!-- The actual content I want to switch in and out of the panel, this is hidden -->
<div id="page1" class="pages">
<p>1 Whole bunch of text 1</div>
<div id="page2" class="pages">
<p>2 Whole bunch of text 2</div>
<div id="page3" class="pages">
<p>3 Whole bunch of text 3</div>
<div id="page4" class="pages">
<p>4 Whole bunch of text 4</div>
<div id="page5" class="pages">
<p>5 Whole bunch of text 5</div>
I suggest that you change your html so that your "pages" have ids that actually correspond to the href of the associated menu items:
Home
...
<div id="home" class="pages"><p>1 Whole bunch of text 1</p></div>
Then you can implement your slide animation paging thing something like this:
$(document).ready(function() {
$("#navigationMenu a").click(function(e) {
e.preventDefault();
var item = this.href.split("#")[1];
$("#content").slideUp(function() {
$(this).empty()
.append($("#" + item).clone().show())
.slideDown();
});
});
});
Note that there is no need to use .load() because you have all of the content already on the page. You can just empty the container and then append a clone of the relevant content.
Demo: http://jsfiddle.net/FtS8u/1/
Or in my opinion a neater option would be to move all of the content into the #content div to start with, show the #home "page" by default, and then just hide and show the pages in place:
$(document).ready(function () {
$("#navigationMenu a").click(function (e) {
e.preventDefault();
var item = this.href.split("#")[1];
$(".pages:visible").slideUp(function () {
$("#" + item).slideDown();
});
});
$("#home").show();
});
Demo: http://jsfiddle.net/FtS8u/2/
And a last thing to consider: if you remove the .pages { display : none; } CSS and instead use jQuery to hide the pages by adding this to the start of your document ready:
$(".pages").hide();
Then you'll still get the same effect: http://jsfiddle.net/FtS8u/7/ - except that if the user happens to have JavaScript disabled the page will still work because then the default anchor navigation will jump down to the associated div: http://jsfiddle.net/FtS8u/8/
Whenever I hover over the second button in the menu, a "submenu" appears. When it appears, it partially covers the images in a div "container".
The styling of the submenu is such that it is semi-transparent so the images inside the div "container" also appear in the background of the menu, which doesnt look that good.
I know that the simple solution would be to change the location of the div but then the images would not be centered so that is not an option. I was wondering if it is possible that whenever I hover over the buttons that have a submenu, the div "container" hide and appear again when I move my mouse away from the menu. The div "container" should not hide when hovering over first Home button since it does not have a submenu and images should remain hidden as long as the menu is open. Is it possible in javascript or jQuery or CSS3??
HTML Code:
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home">Home</li>
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
<ul class="submenu">
<li>
<a id="one" href="">One</a>
</li></br>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="container">
<div id="box1" class="box">Image1<img src="images/image1.png"></div>
<div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>
CSS Code:
ul.menu .submenu{
display: none;
position: absolute;
}
ul.menu li:hover .submenu{
display: block;
}
$('.submenu').hover(function() {
$('#container').hide()
}, function() {
$('#container').show()
});
You basically want to detect on the hover event whenever the current menu item (one of the .menu > a elements) contains a submenu (.submenu).
What about :
$('.menu > a').hover(function(){
if ($(this).find('.submenu').length != 0) {
$('#container').hide();
}
}, function(){
$('#container').show();
});
Also, some of your html closing tags have issues, you should ensure that they are all closing in a correct order to prevent unexpected glitches.
firstly give that div 2 class names like-class1,class2
in Css :
.class1{
display: none;
position: absolute;
}
.class2{
display : block;
}
in jquery :
//this would track mouse pointer in/out events
$("#menu").hover( function(event){ $("#div").attr("class","class1"); },
function(event){ $("#div").attr("class","class1"); } );
You forgot to close this
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
to
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a></li><div>
for the Jquery i think this will help
$('.submenu').mouseenter(function() {
$('#container').hide()
}).mouseleave(function(){
$('#container').show()
});
Currently I have multiple tab navigations on 1 html page and when I click on one navigation it effects the other tab navigations.
I cant seem to figure out how to just effect the tab navigation that I am clicking without hiding the content of other tab navigations.
here is my jquery code
// thumbs click
$('.tabsNav li a').click(function(){
$('.tab').hide();
$($(this).attr('href')).show();
return false;
});
heres my html that I want use multiple times on the page
<div class="rightContent">
<ul class="tabsNav clearfix">
<li>
vlogs
</li>
<li>
mini-docs
</li>
<li>
trailers
</li>
</ul>
<div id="vlogs" class="tab">
</div>
<div id="miniDocs" class="tab">
</div>
<div id="trailers" class="tab">
</div>
</div>
As long as you have a div like the rightContent around it (or anything else), this should work:
$('.tabsNav li a').click(function(){
$(this).parents('tabsNav').parent().find('.tab').hide();
$($(this).attr('href')).show();
return false;
});
$('.tabsNav li a').click(function(){
$(this).parents('.tabsNav').parents('.rightContent').children('.tab').hide();
$($(this).attr('href')).show();
return false;
});