Js noob need help with a onclick

JavaScript
1

Problem: When click on a tab (Ambient,Trip-Hop,House etc etc) on my website http://chilloutsound.com/ , the Newest Additions and What people are listening to right now is showing up. I only want it to show up on the ‘All’ tab. Ive tried to play around with ajax and hiding the text with css with display:none while using an onclick event to no avail.

Can you guys point me in the right direction on how to accomplish this ?

Thank you!

2

Separate the listings section in the HTML in to different groups, such as:


<div id="newest">
    ...
</div>
<div id="listening">
    ...
</div>
<div id="more">
    ...
</div>

which then allows you to have better control over them.

If it were HTML5 you could use the <section> element instead of those divs.

3

Thank you, but what Ajax function would make them dissapear when selected?

4

You can hide them with $(‘#newest, #listening’).hide();
And you can show them with similar code.

You would show them from the allcat click event, and you would hide them from the filter click event.

5

This is what I came up with so far

The Tab:
<a href=“#” onclick:“javascript: hide();” id=“Ambient” class=“filter middle-button” ><span class=“middle-right”></span>Ambient</a>

The JS:
<script language=“Javascript” type=“text/javascript”>
function hide(id) {
$(‘#now’).hide();
}
</script>

What’s supposed to be hidden:
<div id=“now”>
<h1>What people are listening to right now</h1>
</div>

It’s not working, What people are listening to right now is still showing :-/.

6

Go back to the fliter click function that you’re using already in your code.

7

You mean add the $(‘#now’).hide(); to the class="filter " function?

8

When that click function is triggered on one of the filter choices, that is when you want to hide the newest and listening sections, isn’t it?

9

yes

10

Well then, that’s where you should go to add the extra behaviour. To the click function that you have assigned to the filter selection.