Need help Showing one ID, hiding the rest

Question

I've searched and I found this code so I guess this is the start I should use but I don't really get what attribute is wrong.

<script type="text/javascript">
$("a").click(function (){         
    $(".EventShowID").hide();            
    $("#" + $(this).attr("class")).show().siblings('EventShowID').hide();
});
</script>

Link HTML:

<a href="#EventID1" class="EventID1">EVENT!</a>
<a href="#EventID3" class="EventID3">EVENT!</a>
<a href="#EventID4" class="EventID4">EVENT!</a>

Divs:

<div id="EventShow">
    <div id="EventID1" class="EventShowID">Test Event #1<br>Testing adding an event for fun.</div>              
    <div id="EventID3" class="EventShowID">Test Event #2<br>Testing adding another event for fun.</div> 
    <div id="EventID4" class="EventShowID">Test Event #3<br>Testing adding anotheranother event for fun.</div>
</div>

What is wrong. :(

Have you tried `.siblings('.EventShowID')`? Although you have already hidden them in the previous line, so I am not sure why you need to hide them again — Huangism, Jul 14 '14 at 18:45
I want to show The DIV that relates to the link I'm clicking, and hide the rest. .siblings('.EventShowID') did not make any difference :( — indiehjaerta, Jul 14 '14 at 18:48
@user3802471 worked or not you had wrong syntax there also it seems unneeded at that point — Huangism, Jul 14 '14 at 18:51
Seems to be working fine... http://jsfiddle.net/969Fr/ What does your developer console say? — StaticVoid, Jul 14 '14 at 18:51
Take a look at this question and make sure you are actually linking jQuery to your HTML: http://stackoverflow.com/questions/14106864/linking-jquery-in-html or follow this guide: http://dabrook.org/blog/two-ways-to-include-jquery-in-your-document — BuddhistBeast, Jul 14 '14 at 18:54
And through the below answers, your problem is still not fixed? Have you tried placing the tag at the bottom of the body tag? And it says because you edited your comment from before and changed it. Make sure it says that in your HTML document. — BuddhistBeast, Jul 14 '14 at 19:07
Here's a link to my live page, I must be blind: http://indiehjaerta.com/events.php?m=8&y=2014 — indiehjaerta, Jul 14 '14 at 19:11
No still not fixed and it it not edited. No pencil after my post. :@ — indiehjaerta, Jul 14 '14 at 20:04
You didn't wrap your click event handler with the jQuery document ready event handler: `$(function () { YOUR CODE GOES HERE. });` — emerson.marini, Jul 14 '14 at 22:05

score 0 · Answer 1 · answered Jul 14 '14 at 19:00

Your code needs better structuring:

<a href="#event-1" class="event-toggle">Event 1</a>
<a href="#event-2" class="event-toggle">Event 2</a>

<div class="event" id="event-1">1 here</div>
<div class="event" id="event-2">2 here</div>

jQuery:

$('a.event-toggle').click(function(){
  $('.event').hide();
  var el = $(this).attr('href');
  $(el).show();
});

score 0 · Accepted Answer · answered Jul 14 '14 at 22:18

You're not wrapping the click event handler within a jQuery document ready, so it won't be attached properly (jQuery won't find any element before the page is loaded).

Your script should look like this, and be placed after you load the jQuery library:

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        // When the document is ready.
        $(function () {
            // Hide all the elements. This could be replaced by a 
            // CSS rule.
            // ie: 
            // .EventShowID { display: none }
            $(".EventShowID").hide();

            // Attach the click event handler. Use "on" to guarantee it will be 
            // attached to any new element you add dynamically later on.
            $("a.EventToggle").on("click", function () {    
                // Hide all.     
                $(".EventShowID").hide();  

                // Show the element which id is equal the clicked element href.
                $($(this).attr("href")).show();
            });
        });
    </script>
</head>

Demo

Need help Showing one ID, hiding the rest

2 Answers2