This question already has answers here:
Show one div while hiding other divs with jquery when clicking on links
(4 answers)
Closed 8 years ago.
I have a page that lists a series of content. I then have filters so someone can narrow down their search. I'd like to show/hide a block of information in my sidebar according to the filter that someone has clicked on. Basically clicking on a filter will show/hide these DIV's.
Here are two of the filters. Notice the one that is currently selected has an added class of “active” in two places.
<div class="container">
<ul class="filters">
<li class=“first active>
<a class="filterbutton active" href="#filter">Category 1</a>
</li>
<li class=“last”>
<a class="filterbutton" href="#filter">Category 2</a>
</li>
</ul>
</div>
When the page loads, Category 1 is active by default so I will show my corresponding DIV “block-1” by default.
Here is where the magic needs to be: When the filter link is clicked on above I would like to show/hide two DIV's that I have loaded.
<div id="block-1">content</div> <—— Hide this one.
<div id="block-2">content</div> <—— Display this one.
It is also important that when a user clicks back on the first Category that it goes back to the default view of showing just the first block.
UPDATE: It took a long while but I finally figured it out. Using the "duplicate" answer here I tailored it to my needs. I also used some other code to add the necessary "rel" attributes that I needed.
This is definitely possible with simple js and CSS, however the hurdle will be in making it not look jarring. I would recommend using jQuery isotope. http://isotope.metafizzy.co. It isn't just for layouts, it also handles filtering quite nicely. If you don't need it for layout at all you could also use https://mixitup.kunkalabs.com
You can do this with toggle function : http://jsfiddle.net/AU8fX/1/
$( ".filterbutton" ).on( "click", function() {
$('.block').toggle();
});
You say your JS isn't that good, let's see if I can give you enough clues:
<a class="filterbutton active" data-target="#example" href="#filter">Category 1</a>
Html5 has the data-group attributes. I wrote target, but you can put anything there, it can be for your just code.
You can get that when clicked:
$('.filterbutton').on('click', function(){
// do something with the click
alert( $(this).data('target') ); // I alert it, you van use this as a selector
}):
You can togglethe active class very easy with some code in the onclick:
$('.active').removeClass('active');
$(this).addClass('active');
To show and hide elements:
$('.SomeElements').hide();
$( specific selector).show();
Related
I'm looking to change the background color of the currently clicked on tab in my navigation menu. Then when I click a different tab, I want the old one to change back to the original background color. I've seen this tons of places, but every tutorial I follow hasn't worked for me.
Here is the html code I have for the navigation. Basically, I want to change the class "member_nav" to "member_nav_clicked" and then back to "member_nav" when a different tab is clicked.
<div class="member_nav">
Nav 1
</div>
<div class="member_nav">
Nav 2
</div>
<div class="member_nav">
Nav 3
</div>
<div class="member_nav">
nav 4
</div>
<div class="member_nav">
Nav 5
</div>
I'm not going to include any of the javascript functions I've tried, since none of it was working.
Add an active class, then on a click event find the currently active element and remove the active class with $('.active').removeClass('active') after this set the active class to the clicked element $(this).addClass('active').
#adeneo's anwser in the comments is actually better.
$(this).addClass('active').siblings().removeClass('active');
To be honest, this is some jQuery 101... i suggest you read up on the basics. I set up a jsFiddle for you, and i hope you wont just copy paste it but also try to learn something from it.
You can find it here: http://jsfiddle.net/wUpYh/1/
The code:
$('a').on('click', function(){
$('.member_nav_clicked').removeClass('member_nav_clicked').addClass('member_nav');
$(this).closest('.member_nav').removeClass('member_nav').addClass('member_nav_clicked');
});
So what happens is, i remove the member_nav class and add the clicked class. The line above it will take care of the previous clicked item. When an element has the active class, it will be removed before asigning it to the new clicked element.
But to be honest, a nicer way of doing this, would be to assign an active class and leave the normal class as it is. Like this:
$('a').on('click', function(){
$('.member_nav_clicked').removeClass('member_nav_clicked');
$(this).closest('.member_nav').addClass('member_nav_clicked');
});
I made a navigation bar as tabs in my website, and I used the onlink identity to specify the current tab with certain characteristics. My problem is that when I change tabs, I don't know how to make the previous tab id set as none and the current one set as onlink.
Here's the navigation bar code:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd')" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');">Double Indicators</a></li>
</ul>
</div>
</div>
There's a simple ways but it's somehow stupid, which is to make each current tab as a whole page and when I click another tab, it's just given the url of clicked tab which goes to the page with specified onlink id, but this requires reloading the whole page that's why I'm seeking a better solution.
You can get the control being clicked by passing this in javascript method
onclick="DisplayDIV('IndPage', this);
function DisplayDIV(IndPage, sourceObj)
{
alert(sourceObj.id);
}
Are you ok do use the jQuery Library?
If so you can avoid putting inline javascript into your html and use toggleClass http://api.jquery.com/toggleClass/
You are trying to use HTML ids in the wrong way.
Ids are unique identifiers for HTML tags. They should not change at runtime.
Instead, apply CSS classes to the tab you want to be visible.
CSS
.hide {display:none;}
Javascript
var indpage = document.getElementById("IndPage");
if (!indpage.classList.contains("hide")) {
indpage.classList.add("hide");
}
Then your HTML at runtime will change to
<div id="IndPage" class="hide">...</div>
This is the standard approach.
And you can do much more with this idea.
I agree that making a tab a whole page is not a good idea. You can use javascript to apply CSS classes to hide and remove that class to show again.
Its also a good idea to learn how to separate your javascript from your HTML. Please read some more tutorials on this. One for instance: Unobtrusive Javascript
Here is a jquery way to do it: http://jsfiddle.net/surendraVsingh/HyAhL/
$('#indHolder a').click(function(){
$(this).attr('id', 'onlink');
$(this).parent().siblings().find('a').removeAttr('id');
});
I took hints from the answers above and it worked as the following:
function putOnlink(x){
document.getElementById('onlink').id = "none";
$(x).attr('id','onlink');
}
and the tabs code is:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd');putOnlink(this);" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');putOnlink(this);document.getElementById('onlink').id='none'">Double Indicators</a></li>
</ul>
</div>
</div>
I just wanna not that in the second link I had to change the id of the first link twice because it didn't work once, maybe cause its id is set in the tag not just when clicked.
I have made some menu with a slide down submenu. It should work fine but for some reason it doesn't work. I mean if you look at this fiddle: http://jsfiddle.net/yJdFu/2/ , you'll see that the big menus don't slide down when the submenu toogles.
Can you tell me why isn't it working ?
It is actually working. The problem is you have a specified height to the list items. So the submenu is appearing below the existing items.
Remove the height from the list items.
Updated Fiddle
You weren't missing any closing tags. The html is correct. Error was in CSS. Also, I altered the jquery a bit. not sure why you were using .find() when the item can be called by it's class, and I specified which toggle to use.
This fiddle uses jquery which specifies the toggle only occurs on the "dashboard" link. Otherwise the sub navigation closes when one of its links is clicked.
You are missing a closing </li> tag.
<li class="dashboard"><a href="#">
<img src="assets/gfx/dashboard.png" alt="Dashboard">
<span>Dashboard</span></a>
</li>
see here http://jsfiddle.net/yJdFu/4/
As Roland said above, you may also want to look at the built-in JQuery UI Accordion before rolling your own solution.
So I'm very much a jQuery noob and I don't know whether the following is possible - at least as I'm thinking of it - or how to do it.
The current setup
http://joelglovier.com
So I have a one page mini-site with a fixed navigation at the top of the screen. All (but one) of the navigation elements simply scroll the user down to the corresponding div down the page. I have that all set up just fine.
What I want to do...
I want to use jQuery to add a class of "active" to the list item anchors when they are positioned over their respective div on the page. Preferably it would not use the click function, so that even users who simply scroll down the page without clicking on the nav elements to get their would experience the same thing. Similar to the phpfog home page.
I peeked at the way phpfog.com has it setup and from what I could see it's using some type of calculation with the window selector to apply the class, but A) I don't completely understand what it's doing or how to build something similar, and B) I don't know if they are doing it in the most straightforward manner.
I wrote out what I want to accomplish in a plain english statement, since I don't have a mastery on jQuery enough yet to write it out in a syntax:
If .section-link is in the window on the
href value of same id, add class of
"active"
So here's the code I have (HTML only, the CSS is irrelevant bc I already know how I want to style it, just want to add the active class at the appropriate place):
<div id="site-nav">
<div class="wrap">
<ul id="nav-links">
<li class="section-title-nav top">
<h4>Home</h4>
</li>
<li class="section-title-nav skills">
<h4>Background</h4>
</li>
<li class="section-title-nav projects">
<h4>Projects</h4>
</li>
<li class="section-title-nav blog">
<h4>Blog</h4>
</li>
<li class="section-title-nav random">
<h4>Random</h4>
</li>
<li class="section-title-nav credits">
<h4>Credits</h4>
</li>
</ul>
</div>
</div>
And further down the page, sections that are linked to in the nav are marked up about like this:
<div id="random-section" class="main-section wrap clearfix">
<h2 class="section-title"><span class="bg">Random</span></h2>
<span class="section-title-border"></span>
<h2 class="coming-soon">COMING SOON</h2>
</div><!--/#random-section-->
So, and tips on how to accomplish this, or whether I'm thinking about it the wrong way is what I'm looking for. Thanks!
Here's a working example I put together; I will be the first to admit it can be improved but it might give you a decent starting point to work from.
http://jsfiddle.net/nogoodatcoding/KMwhZ/1/
The basic idea is to listen for scroll events on the window and then, for each navigation link, extract the href value and check if the corresponding element is visible or not. If it is, then it's link is selected and the previously highlighted element is deselected. I'm breaking early when the first visible section is found, you can get slightly different behaviour by going all the way through the list.
My example breaks when the divs are small enough in height that multiple divs are visible when the page is scrolled all the way to the bottom - in the case, the links for the lowest few divs will never get hightlighted. But that appears to be the case even with the phpfog page you linked to - the links for Testimonials and Free Tools never get activated because my display is tall enough to show the last 3 sections when scrolled all the way down. Note that this won't be the case if don't break early - there, the last visible section will be highlighted. But you can then see the opposite problem - the top section's link is never activated since something else is always visible.
<script type="text/javascript">
jQuery(document).ready(function($) {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$("#navbar li a").each(function() {//alert('dsfgsdgfd');
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass("active");}
});`enter code here`
});
</script>
Basically I hide all of the answer divs on the page, but I want to show a div if the a user has clicked a bookmarked link to it.
Here's the javascript code
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".faq_answer").hide();
//toggle the componenet with class msg_body
$(".faq_question").click(function(){
$(this).next(".faq_answer").slideToggle("normal");
});
});
</script>
The resulting HTML for the section is
<li>
<div class="faq_question">
Question
</div>
<div class="faq_answer">
<p>Text to show</p>
</div>
</li>
EDIT
The question was how do I do it...Figured it out though after the answers here.
window.location.hash will give you the value "#" in your URL. You can use that to build a selector.
// if visiting /index.php#item1
$(window.location.hash).show(); // $('#item1').show();
You can look for the #url-blah in the URL in javascript and display the corresponding section?
I would assume you would need to add a class to the div that hides it and shows it based on the click function
I dont really see a question here though
To accomplish this you are going to most likely need to change your document structure a bit, as you cannot reference any of the specific "faq_answer" items individually.
Typically what I would do here is use a specific ID for each of the answers, then you can use javascript with a show action to be able to toggle visibility.
For an example of my HTML and jQuery code, you can view this page, look at the version history section.