I think I may be using the wrong js library. No idea.. I was following a tutorial online and I saw the guy code it, and watch it work. I reviewed twice and did it over and still didn't work.
Here's my html:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<script src="//ajax.googleapis/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="hideshow.js"></script>
</head>
<body>
<a href="#" id="hideshow">Hide </a>
<div id="message" style="width:300px; border:1px solid black; padding:10px">
This is the wording inside of the text for testing purposes.
</div>
</body>
Here's my js from hideshow.js:
$('#hideshow').toggle(function () {
$('#hideshow').text('Show');
}, function () {
$('#hideshow').text('Hide');
});
I appreciate it, Thanks for whoever can figure this out. :(
I think I may be using the wrong js library. No idea.. I was following a tutorial online and I saw the guy code it, and watch it work. I reviewed twice and did it over and still didn't work.
Here's my html:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<script src="//ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="hideshow.js"></script>
</head>
<body>
<a href="#" id="hideshow">Hide </a>
<div id="message" style="width:300px; border:1px solid black; padding:10px">
This is the wording inside of the text for testing purposes.
</div>
</body>
Here's my js from hideshow.js:
$('#hideshow').toggle(function () {
$('#hideshow').text('Show');
}, function () {
$('#hideshow').text('Hide');
});
I appreciate it, Thanks for whoever can figure this out. :(
Looks like you're trying to use the toggle event, which was deprecated in jQuery 1.8 and removed on jQuery 1.9. The new toggle function has many different overloads, but none that behaves like the old one. Take a look at it and choose the one that suits you the most. For example, you could do something like this:
$('#hideshow').click(function () {
$('#message').toggle();
if($('#message').is(':visible')) {
$('#hideshow').text('Hide');
} else {
$('#hideshow').text('Show');
}
});
And here's a jsfiddle for you to play with. http://jsfiddle/74GzV/1/
As j08691 pointed out, toggle is removed, but even if it wasn't <script src="hideshow.js"></script> is running before the page has loaded, and therefore #hideshow would turn up undefined. Try putting the whole thing in a $(document).ready after working around the lack of toggle
var toggler = $('#hideshow');
toggler.text('Hide');
toggler.click(function(e) {
e.preventDefault();
$('#message').slideToggle('slow', function () {
var togglerLabel = $(this).is(':visible') ? 'Hide' : 'Show';
toggler.text(togglerLabel);
});
});
http://jsfiddle/4TqQT/46/