CODEWITHSUNDEEP
javascriptjqueryhtmlshow-hide
GhostToast
GhostToast

Reputation: 467

jQuery show / hide not working

Tried to look at all the other questions about why this isn't working, no luck. I'm loading this in my header:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Here is my script: 

$(document).ready(function() {
    $("#knee-tab").hide();
    $("#shoulder-tab").hide();
});
$(function () {
    $("#patient-portal-link").click (function (event) {
        $("#patient-portal-tab").show();
        $("#knee-tab").hide();
        $("#shoulder-tab").hide();
    });
}); 
$(function () {
    $("#knee-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").show();
        $("#shoulder-tab").hide();
        }); 
}); 
$(function () {
    $("#shoulder-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").hide();
        $("#shoulder-tab").show();
    }); 
});

Here are the links that are meant to call up the script: 

<ul>
<li><a id="#patient-portal-link">Patient Portal</a></li>
<li><a id="#knee-link">Knee</a></li>
<li><a id="#shoulder-link">Shoulder</a></li>
</ul>

And then I have the three divs which are named as follows:

<div id="patient-portal-tab">Patient portal content</div>
<div id="knee-tab">Knee content</div>
<div id="shoulder-tab">Shoulder content</div>

The knee and shoulder divs hide correctly on page load, but the links do nothing. I'm using Google Chrome and when inspecting element, I get no errors reported for javascript. What am I doing wrong?

Upvotes: 2

Views: 8258

Answers (5)

sottany
sottany

Reputation: 1098

Click here

check this fiddle in this code you have entered extra # to the id overwrite your previous html to the html code given in fiddle

Upvotes: 0

Daniel Li
Daniel Li

Reputation: 15399

Remove the # characters from your ID values. The # character in jQuery denotes an ID of an element, so you would need two #'s (##knee-tab) for this to work.

Upvotes: 10

keaton_fu
keaton_fu

Reputation: 442

$(function() ... ) is just shorthand for $(document).ready(function() ...) if i recall correctly. So you are using too many ready calls. Try this:

$(document).ready(function() {
    $("#knee-tab").hide();
    $("#shoulder-tab").hide();

    $("#patient-portal-link").click (function (event) {
        $("#patient-portal-tab").show();
        $("#knee-tab").hide();
        $("#shoulder-tab").hide();
    });{

    $("#knee-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").show();
        $("#shoulder-tab").hide();
        }); 

    $("#shoulder-link").click (function (event) {
        $("#patient-portal-tab").hide();
        $("#knee-tab").hide();
        $("#shoulder-tab").show();
    }); 

});

Upvotes: 1

amischol
amischol

Reputation: 54

your problem is in your HTML code. The id's in HTML doesn't need the hash '#'.

Upvotes: 1

Shyju
Shyju

Reputation: 218892

Are you sure you have the # symbol infront of the Ids. ReWrite it like this and it will work

<li><a id="patient-portal-link">Patient Portal</a></li>
<li><a id="knee-link">Knee</a></li>
<li><a id="shoulder-link">Shoulder</a></li>

Upvotes: 2

Related Questions