We Keep Coding

Elegant way of avoiding writing so many (click hide show)

im looking for the elegant way to avoid writing so much code to perform onclick, show clicked, hide others.
here's the code im using:
html:
<p align="center" style="font-size: 22px;">
<span class="badge badge-secondary" id="yesterday">Yesterday</span>
<span class="badge badge-dark" id="today">Today</span>
<span class="badge badge-secondary" id="tomorrow">Tomorrow</span>
</p>
jquery:
$('#yesterday').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
$('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.yesterday').slideDown('slow');
$('.today,.tomorrow').slideUp('1000');
});
$('#today').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
$('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.today').slideDown('slow');
$('.yesterday,.tomorrow').slideUp('1000');
});
$('#tomorrow').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
$('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
$('.tomorrow').slideDown('slow');
$('.yesterday,.today').slideUp('1000');
});

To do this:
Use a class on those three elements (say, show-hide)
Use a class on the .yesterday, .today, and .tomorrow elements as well (say, slide-target).
Use a single click handler on the class
Within the handler, this is the element you want to show, and its siblings (see siblings) are the ones you want to hide
Within the handler, $('.slide-target') is all the targets, then you can use .filter('.' + this.id) to only target the one for this element, and .not('.' + this.id) to target the others
So roughly speaking:
<p align="center" style="font-size: 22px;">
<span class="show-hide badge badge-secondary">Yesterday</span>
<span class="show-hide badge badge-dark">Today</span>
<span class="show-hide badge badge-secondary">Tomorrow</span>
</p>
and
$('.show-hide').click(function(e) {
e.preventDefault();
// Just to avoid doing it repeatedly
var $this = $(this);
// Add this class
$this.addClass('badge-dark').removeClass('badge-secondary');
// Remove it from siblings
$this.siblings().addClass('badge-secondary').removeClass('badge-dark');
// Find the target elements
$('.slide-target')
.filter('.' + this.id).slideDown('1000').end() // Slide down related
.not('.' + this.id).slideUp('1000') // Slide up others
// Slide down the relevant element(s)
});

A simple extraction of common logic to separate function:
function updateClasses(element, selector) {
element.addClass('badge-dark').removeClass('badge-secondary');
$(selector).addClass('badge-secondary').removeClass('badge-dark').slideUp('1000');
}
$('#yesterday').click(function (e) {
e.preventDefault();
updateClasses(this, '#today,#tomorrow');
$('.yesterday').slideDown('slow');
});
$('#today').click(function (e) {
e.preventDefault();
updateClasses(this, '#yesterday,#tomorrow');
$('.today').slideDown('slow');
});
$('#tomorrow').click(function (e) {
e.preventDefault();
updateClasses(this, '#yesterday,#today');
$('.tomorrow').slideDown('slow');
});

Something like this:
$('#yesterday, #today, #tommorow').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
if ( $(this).is("#yesterday") ) {
$('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.yesterday').slideDown('slow');
$('.today,.tomorrow').slideUp('1000');
} else if ( $(this).is("#today") ) {
$('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.today').slideDown('slow');
$('.yesterday,.tomorrow').slideUp('1000');
} else if ( $(this).is("#tomorrow") ) {
$('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
$('.tomorrow').slideDown('slow');
$('.yesterday,.today').slideUp('1000');
}
});

I can't think about an easier way to do it:
Using your class badge as the selector for your .click() function.
Using $(this) to change classes on the clicked element, and $('.badge').not($(this)) to target all others.
Getting the class name to show, according to the element you clicked.
Doing the same as point #2 to display/hide the wanted elements.
Here is a working snippet where I added some styling:
$('.badge').click(function(e) {
e.preventDefault();
$('.badge').not($(this)).removeClass('badge-dark').addClass('badge-secondary'); // Resets all except…
$(this).removeClass('badge-secondary').addClass('badge-dark'); // … the one clicked
var classToShow = '.' + $(this).attr('id'); // Get this id
$('.days').not(classToShow).slideUp('1000'); // Hide all except…
$(classToShow).slideDown('slow'); // … the one wanted
});
p {
font-size: 22px;
}
.badge-secondary {
opacity: 0.5;
}
.badge a {
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p align="center">
<span class="badge badge-secondary" id="yesterday">Yesterday</span>
<span class="badge badge-dark" id="today">Today</span>
<span class="badge badge-secondary" id="tomorrow">Tomorrow</span>
</p>
<p class="days yesterday">Yesterday…</p>
<p class="days today">Today…</p>
<p class="days tomorrow">Tomorrow…</p>
Hope it helps!

Click button to show div, then remove button

I have managed to create a button that shows my div. but I want to have the button disappear as that happens.
At the moment my button only disappears the second time I click it. Any help appreciated.
$(document).ready(function() {
$('.click').click(function() {
$('#contact-form').toggle('slide', 500)
$('.click').toggle();
});
});
.click {
display: block;
}
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form"></div>

The reason why it is not working is, you are mixing the display between CSS and JavaScript. jQuery uses the current inline style to check if the button is hidden to display it, when you use .toggle(). Since it doesn't have anything at first, it adds a display: block (or whatever the initial value is) and then when you do the second time, it correctly identifies and removes.
The best thing to do is to use classes. I would suggest something like this parent class.
$(document).ready(function() {
$('.click').click(function() {
$("body").toggleClass("contact-form-open");
});
});
.contact-form-open .click,
#contact-form {
display: none;
}
.contact-form-open #contact-form {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
This way, you control everything using CSS and you don't mess up with the event listeners or add the yucky inline CSS.

I've tried what you've tried and it seems to be working. Maybe it's because you don't close the div tag ?
$(function() {
$('.click').click(function() {
$('.myDiv').toggle();
$('.click').toggle();
})
});
http://plnkr.co/edit/wD0bwf8XK3CFXXM7rVWF?p=preview

but I want to have the button disappear as that happens.
So just use hide() instead of toggle :
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
Hope this helps.
$(document).ready(function() {
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
});
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form">Form content</div>

More easy:
$(document).ready(function() {
$('.click').click(function() {
$("#contact-form").show();
$(this).remove();
});
});
#contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>

If HTML text equals value, onclick change

Okay, I have tried a few ways of doing this but nothing has worked. I am hoping someone here can tell me what I am doing wrong. Below is a step-by-step of what I am trying to achieve.
#info-NUMBER-btn displays Click to display more information.
#info-NUMBER CSS is set to display: none.
When #info-NUMBER-btn is clicked:
- Corresponding #info-NUMBER-btn displays Click to display less information.
- Corresponding #info-NUMBER CSS is set to display: inline-block.
/* Jquery */
$(document).ready(function() {
$("#info-1-btn").text("Click to display more information");
$("#info-2-btn").text("Click to display more information");
$("#info-3-btn").text("Click to display more information");
$("#info-4-btn").text("Click to display more information");
$("#info-5-btn").text("Click to display more information");
if($("#info-1-btn").text("Click to display more information")) {
$("#info-1-btn").click(function () {
$(this).text("Click to display less information");
$("#info-1").css("display", "inline-block");
});
} else if($("#info-1").text("Click to display less information")) {
$("#info-1-btn").click(function() {
$(this).text("Click to display more information");
$("#info-1").css("display", "none");
});
}
if($("#info-2-btn").text("Click to display more information")) {
$("#info-2-btn").click(function () {
$(this).text("Click to display less information");
$("#info-2").css("display", "inline-block");
});
} else {
$("#info-2-btn").click(function() {
$(this).text("Click to display more information");
$("#info-2").css("display", "none");
});
}
if($("#info-5-btn").text("Click to display more information")) {
$("#info-5-btn").click(function () {
$(this).text("Click to display less information");
$("#info-5").css("display", "inline-block");
});
} else {
$("#info-5-btn").click(function() {
$(this).text("Click to display more information");
$("#info-5").css("display", "none");
});
}
});
<!-- HTML -->
<div id="info-5" class="hire-equipment-more-information">
<table class="hire-equipment-more-information-table" cellpadding="15px">
<tr>
<th>Length:</th>
<th>Material:</th>
<th>HP:</th>
</tr>
<tr>
<td>7.5m</td>
<td>Aluminium</td>
<td>225</td>
</tr>
</table>
</div>
<br />
<a id="info-5-btn" class="hire-equipment-item-link"></a>

You could make it a lot more easy for yourself, by binding not to the element id's, but to use your class hire-equipment.
This way you don't have to bind to 5 different buttons that in essence do the same thing.
Once you hit the eventHandler, you can use the first argument of the function, to check from which button you are coming and take the appropriate action.
As an example, I just created the 5 elements, and 1 event handler.
The $(selector).click() will bind to all elements sharing the selector ( in my case hire-equipment), and then, it will check from which button it's coming, select the parent node (the div surrounding the button, title and description), search the description element, and toggle it's hidden class. The buttons text will then change depending on it's text.
It's not fully how your example is built, but it's an example of making your event handlers a bit more generic.
$('.hire-equipment').click(function(event) {
var sourceElement = $(event.target);
$(sourceElement).parent().find('.description').toggleClass('hidden');
if ($(sourceElement).text() === 'Show more information') {
$(sourceElement).text('Show less information');
} else {
$(sourceElement).text('Show more information');
}
});
.hidden {
display: none;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p class="title">Title of item</p>
<div class="description hidden">This is a description</div>
<button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
<p class="title">Title of item</p>
<div class="description hidden">This is a description</div>
<button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
<p class="title">Title of item</p>
<div class="description hidden">This is a description</div>
<button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
<p class="title">Title of item</p>
<div class="description hidden">This is a description</div>
<button type="button" class="hire-equipment">Show more information</button>
</div>

Lets examine this line of code
if($("#info-1-btn").text("Click to display more information")) {
This should be:
if($("#info-1-btn").text() === "Click to display more information")) {
The text function is an overloaded function. If you pass in no value, it will return you the text inside the element.
If you pass in a value, it will modify the text, and return the jQuery object again (which will be a truthy value).
Now lets look at your overall logic.
Your code is testing the state of the buttons once, when the document loads. It should be testing the state of the button as part of the click handler.
See this complete code example: http://plnkr.co/edit/HLsLcKrRY3OqK6w44bXp?p=preview
It might not match your requirements exactly, but it demonstrates how you test the state of the button inside a click handler.
It also demonstrates how you can use a custom attribute (in this case, data-target) to link a button to a div block.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
<button class="toggleButton" data-target="buttonOneInfo"></button>
<br />
<div class="toggleTarget" id="buttonOneInfo">
Here's some information about the first item
</div>
<button class="toggleButton" data-target="buttonTwoInfo"></button>
<br />
<div class="toggleTarget" id="buttonTwoInfo">
Here's some information about the second item
</div>
<button class="toggleButton" data-target="buttonThreeInfo"></button>
<br />
<div class="toggleTarget" id="buttonThreeInfo">
Here's some information about the third item
</div>
</body>
<script type="text/javascript">
$(function() {
$('.toggleTarget').hide();
$(".toggleButton")
.text("Click to display more information")
.click(function() {
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if ($(this).text() === 'Click to display more information') {
$(this).text('Click to display less information');
toggleTarget.show();
} else {
$(this).text('Click to display more information');
toggleTarget.hide();
}
});
});
</script>
</html>

Trimmed the fat off of OP's jQuery. The following procedure is roughly outlined here:
Primary method used is toggleClass()
At least 2 classes are required to indicate a state of .info-btn
The big advantage of using classes is that you can add more styles to each class that would enhance .info-btn's state. ex. color, background-color
Further details are commented in the source of the Snippet below:
SNIPPET
/* jQuery */
// Alternate styntax for $(document).ready(
$(function() {
// Click on ANYTHING with the class .info-btn
$(".info-btn").on("click", function(e) {
// Prevent .info-btn from jumping when clicked
e.preventDefault();
/* `this` or .info-btn will toggle between the
| classes of .more and .less
| See CSS for details of expected behavior of
| .info-btn in both states
*/
$(this).toggleClass('more less');
});
});
.info-btn {
cursor: pointer;
}
/* Both classes use the :after pseudo-selector
| The value of content will complete the
| string: "Click to display"...
*/
a.more:after {
content: ' more information';
}
a.less:after {
content: ' less information';
}
button.less:before {
content: 'less ';
}
button.less:after {
content: ' more';
}
button.more:before {
content: 'more ';
}
button.more:after {
content: ' less';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->
<div id="info-5" class="rental-info">
<table class="rental-info-table" cellpadding="15px">
<tr>
<th>Length:</th>
<th>Material:</th>
<th>HP:</th>
</tr>
<tr>
<td>7.5m</td>
<td>Aluminium</td>
<td>225</td>
</tr>
</table>
</div>
<br />
<a class="info-btn rental-link more">Click to display</a>
<br/>
<button class='info-btn less'>is</button>
<br/>

jQuery hover stops working after a few seconds?

I am new to programming and am mostly just playing around with HTML and JavaScript right now. I recently learned about jQuery and was trying to use it in a periodic table quiz page I made. I wanted to be able to mouse over certain elements and see a relevant picture and then mouse off and restore it to the element symbol and name that was there before. Here is my code:
The element is in a table coded by HTML, like so:
<table id="ptable" style="text-align:center;">
<tr>
<td>
<div id="einsteinium"><span style="font-size:32px;">Es</span>
<p style="font-size:12px;">Einsteinium</p>
</div>
</td>
<td>hydrogen</td>
<td>helium</td>
</tr>
</table>
And here is the jQuery:
$(document).ready(function () {
var oldhtml = "";
oldhtml = $("#einsteinium").html();
$("#einsteinium").hover(function () {
$("#einsteinium").html("<img src=\"http://images.mentalfloss.com/sites/default/files/styles/insert_main_wide_image/public/einstein1_7.jpg\" height=\"70px\" width=\"70px\">");
},
function () {
$("#einsteinium").html(oldhtml);
});
});
Fiddle
The problem is that the picture of Einstein will get stuck and won't return to the element symbol/name. On the fiddle, if you keep mousing over it, it will start working again, but it doesn't do that on my code. For me, when it gets stuck it doesn't get unstuck (but the fiddle does get stuck too, and I don't want that to happen at all). I have tried changing the z-index of the div and table, but no luck there. I'd really appreciate any help!

The problem is because, you are changing the contents of the hovering div, which is messing up the mouse enter/leave events
You can do it without any javascript, but with css and the :hover selector like
#einsteinium > img {
display: none;
}
#einsteinium:hover > img {
display: inline-block;
}
#einsteinium:hover > div {
display: none;
}
<table id="ptable" style="text-align:center;">
<tr>
<td>
<div id="einsteinium">
<img src="http://images.mentalfloss.com/sites/default/files/styles/insert_main_wide_image/public/einstein1_7.jpg" height="70px" width="70px">
<div>
<span style="font-size:32px;">Es</span>
<p style="font-size:12px;">Einsteinium</p>
</div>
</div>
</td>
<td>hydrogen</td>
<td>helium</td>
</tr>
</table>

How to toggle visibility of several divs separately

I have a series of text links that toggle visibility of a div element. The text links are styled to look like buttons and the text is being changed when the div is visible or invisible.
The problem is that when the first link is pressed, it toggles the visibility of it's own div plus all the other hidden divs and what is needed is that each link toggles the visibility of it's own div.
My question is what is the best way to solve this problem using only one function. Below is my code. Thanks!
The code can be also tested here:
http://jsfiddle.net/Bradg/eBfxB/
HTML:
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>
JS:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(".slidingDiv").slideDown(
function(){
$("#plus").text("Hide all")
}
);
},function(){
$(".slidingDiv").slideUp(
function(){
$("#plus").text("See all")
}
);
});
});
CSS:
.show_hide {
display: none;
}

The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "Hide all" ? "See all" : "Hide all";
});
});
});
});
FIDDLE
Note the use of the classes only (ID's must be unique) and the this keyword