jQuery show / hide not working - javascript

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?

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.

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>

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

$(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();
});
});

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

Related

Is there any way to shortcut this method? Hide/Show element on jquery

I would like to ask you guys if I can shortcut this code as I think it can be more less code but I'm learning right now Javascript/Jquery.
Thanks!
<script type="text/javascript">
$(document).ready(
function(){
$(".facebook").click(function () {
$("#facebook_prices").show("slow")
$("#twitter_prices").hide("slow")
$("#youtube_prices").hide("slow");
});});
$(document).ready(
function(){
$(".twitter").click(function () {
$("#twitter_prices").show("slow")
$("#facebook_prices").hide("slow")
$("#youtube_prices").hide("slow");
});});
$(document).ready(
function(){
$(".youtube").click(function () {
$("#youtube_prices").show("slow")
$("#facebook_prices").hide("slow")
$("#twitter_prices").hide("slow");
});});
</script>
The first thing to do is to only use one document.ready handler. You don't need to repeat it for every operation.
The pattern you're looking to follow here is called 'Don't Repeat Yourself', or DRY. To achieve this you can apply common classes to the elements which trigger events and use the href (assuming the trigger is an a element) or data attributes to store custom metadata to separate the actions performed by each element. Try this:
$(document).ready(function() {
$(".trigger").click(function(e) {
e.preventDefault();
$('.price').hide('slow');
$($(this).attr('href')).show("slow")
});
});
.price {display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Facebook
Twitter
Youtube
<div class="price" id="facebook_prices">
Facebook prices...
</div>
<div class="price" id="twitter_prices">
Twitter prices...
</div>
<div class="price" id="youtube_prices">
Youtube prices...
</div>
You can use comma ( , ) to similar elements to hide()
Check below code :
$(document).ready(function () {
$(".facebook").click(function () {
$("#facebook_prices").show("slow");
$("#twitter_prices,#youtube_prices").hide("slow");
});
$(".twitter").click(function () {
$("#twitter_prices").show("slow");
$("#facebook_prices,#youtube_prices").hide("slow");
});
$(".youtube").click(function () {
$("#youtube_prices").show("slow");
$("#facebook_prices,#twitter_prices").hide("slow");
});
});
Check the below implementation. Removed the repetitive .ready() methods and merged the hide functions.
<script type="text/javascript">
function hideAll(){
$("#facebook_prices").hide("slow")
$("#twitter_prices").hide("slow")
$("#youtube_prices").hide("slow");
}
$(document).ready(
function(){
$(".facebook").click(function () {
hideAll();
$("#facebook_prices").show("slow");
});
$(".twitter").click(function () {
hideAll();
$("#twitter_prices").show("slow");
});
$(".youtube").click(function () {
hideAll();
$("#youtube_prices").show("slow");
});
});
</script>
Hope this helps :)

Javascript / Jquery onclick function condensation

I was wondering if what can I do with my codes to make it shorter.
Here is my code, it is like a simple tabs.
Btw, this codes are already working, but I'm thinking that if i have many tabs then I have to repeat many click functions.
Is there a way to make my script shorter, Thanks in advance.
$(function () {
$(".invMer, .invEq").hide();
$(".mergers a").click(function () {
$(".invMer").fadeIn();
$(".invEq, .invPe").hide();
});
$(".equity a").click(function () {
$(".invEq").fadeIn();
$(".invMer, .invPe").hide();
});
$(".privateEq a").click(function () {
$(".invPe").fadeIn();
$(".invMer, .invEq").hide();
});
Give all the links the same class, and a data attribute that says which tab it should open. So something like:
<div class="mergers">
<a class="tablink" href="#" data-tab="invMer">Mergers</a>
</div>
And all the tab DIVs should also have a common class:
<div class="tabdiv" id="invMer">
...
</div>
Then you can use a single handler:
$(".tablink").click(function() {
var tab = '#' + $(this).data("tab");
$(".tabdiv").not(tab).hide();
$(tab).show();
});
Use a data attribute
<a data-show=".invPe">
and do
$("a[data-show]").on("click", function () {
var selector = $(this).data("show");
$(".invMer, .invEq, .invPe").hide();
$(selector).fadeIn();
});

How to optimize jQuery code for adding classes (to different elements)?

Example HTML (for the sake of clarity):
<nav>
<ul>
<li class="top-navbar-channels">
<div class="dropdown-menu">BLAH, BLAH, BLAH!</div>
</li>
<li class="top-navbar-about">
<div class="dropdown-menu-about">BLAH, BLAH, BLAH!</div>
</li>
<li class="top-navbar-search">
<div class="dropdown-menu-search">BLAH, BLAH, BLAH!</div>
</li>
</ul>
</nav>
Example jQuery code:
jQuery(document).ready(function($){
$('.dropdown-menu').on('show', function () {
$('.top-navbar-channels > a').addClass('selected');
});
$('.dropdown-menu').on('hide', function () {
$('.top-navbar-channels > a').removeClass('selected');
});
$('.dropdown-menu-about').on('show', function () {
$('.top-navbar-about > a').addClass('selected');
});
$('.dropdown-menu-about').on('hide', function () {
$('.top-navbar-about > a').removeClass('selected');
});
$('.dropdown-menu-search').on('show', function () {
$('.top-navbar-search > a').addClass('selected');
});
$('.dropdown-menu-search').on('hide', function () {
$('.top-navbar-search > a').removeClass('selected');
});
});
For those who are curious... the jQuery code adds a new class selected to the active menu item's link. In my case it's Twitter Bootstrap-based collapsible menu, where active means, the menu item is not collapsed i.e. open.
Now, the question is, can the jQuery code be optimized (i.e. same functionality with less code)? If so, how?
Add a common class to common main elements so you can use that single class as the selector. You can also combine the events into one on() call and use toggleClass() on the link. on() allows for multiple space separated events
Example
<div class="dropdown-menu menu_content">
Then for jQuery:
$('.menu_content').on('show hide', function () {
$(this).siblings("a").toggleClass('selected');
});
Perhaps, this code:
jQuery(document).ready(function($){
var $menus = $('.dropdown-menu, .dropdown-menu-search, .dropdown-menu-about');
$menus.on('show', function () {
$(this).siblings("a").addClass('selected'); // or alternatively, $(this).prev("a")
});
$menus.on('hide', function () {
$(this).siblings("a").removeClass('selected'); // idem as above
});
});
This is a little shorter then Matthias... not very much shorter
$(function(){
$('.dropdown-menu, .dropdown-menu-search, .dropdown-menu-about').on('show',function(){
$(this).siblings('a').addClass('selected');
}).on('hide',function(){
$(this).siblings('a').removeClass('selected');
});
});

jQuery .slideToggle() function isnt working

I have found some jQuery codes for show content with slide effect, but none of them works.
the Javasccript code:
$('#clickme').click(function() {
$('#pic').slideToggle('slow', function() {
});
});
the HTML:
<div id="clickme">
click here</div>
<img id="pic" src="Img/Gallery/123.jpg" />
When i click the "click me" div, nothing happens. I have also tried this :
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
But again, nothing happens. What is the problem?
Thanks!
There are two ways that it works:
1) Add the following code in the header
$(document).ready(function () {
$("div").click(function () {
$('#pic').slideToggle('slow', function() {
});
});
});
2) Place your code after your last div!
And obviously you have to include a jquery file!
For example:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Put your code in
$(document).ready(function(){
// Your code here
});
you shlould load jQuery by adding this line at the head:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
You may also want to change your code to this:
$("div").on("click", function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
Check this jsfiddle to see the working example. ) Btw, it's not necessary to pass the empty function to slideToggle, I suppose.
I guess the only difference is that you try to run your javascript not as onload function; it doesn't find any 'clickme' elements, that's why event handler function is not called.

Combining document ready scripts?

I'm using a simple show-hide script on various IDs. The issue is as it stands right now each is a seperate JS that calls the document ready function via jQuery.
Is there a way to combine this into one more flexible script or at least into one script in some form or another. Thank you so much for your time in advance!
Below is an example:
<script type="text/javascript">
$(document).ready(function () {
$("#loadDummy7").hover(
function () {
$("#dummy7").show();
}, function () {
$("#dummy7").hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#loadDummy8").hover(
function () {
$("#dummy8").show();
}, function () {
$("#dummy8").hide();
});
});
</script>
You can combine it into a single script like this:
$(function(){
$("[id^='loadDummy']").hover(function() {
$("#" + this.id.replace('loadD', 'd')).toggle();
});
});
This uses the attribute-starts-with selector to get all id="loadDummyXXX" controls and finds the element to toggle with the corresponding dummyXXX ID. An easier way would be to use classes and find it relatively, for example if your markup was like this:
<div class="dummyWrapper">
Stuff
<div class="dummy" style="display: none;"> More Stuff</div>
</div>
You could do it like this, much cleaner:
$(function(){
$(".dummyWrapper").hover(function() {
$(this).find(".dummy").toggle();
});
});

Categories