We Keep Coding

Using $(this) and addClass/removeClass simultaneously to show/hide content of a bottom navbar

THE AIM
I have the code below with a bottom navbar of three different menus showing three different contents in which I would like the following to happen:
The default active menu/content should be the first one (home menu).
One menu/content should always be active, i.e. if I click on the current menu nothing would happen and only if I click on a different one I would see some change (i.e. other menu and content would be active).
When refreshing the page, the user should remain in the menu/content they were before refreshing with the menu icon active (i.e. black) and the content of the respective menu shown.
When closing the browser/tab and reopening, the menu/content shown should be the default one (home menu).
THE PROBLEM
Once first opened the browser/tab the default menu/content (home) is shown as desired. However, when clicking in another menu icon, only it's icon menu is shown as active and the content does not shows at all, I think this is because I am using $(this) and it only represents a[class^=menu].
When refreshing, the content of the menu is shown as active but the menu icon is not (i.e. it is not black). As I keep clicking on other menus, their menu icons are shown as active but their respective contents are not shown at all.
THE ATTEMPT
By the doing the following I obviously got contents overlapping...
$("div[class^=content]").addClass("active");
It is not clear to me how I can make a proper use of $(this) to also target the respective content of the current menu.
SUMMARY
Set the content of the respective menu active when such menu is also active.
When refreshing the browser, both the menu and content should be active (i.e. menu icon is black and the content of the respective menu is shown).
$(document).ready(function() {
$("a[class^=menu]").click(function() {
if ($("a[class^=menu],div[class^=content]").hasClass("active")) {
$("a[class^=menu],div[class^=content]").removeClass("active");
}
var href = $(this).attr("href");
$(this).addClass("active");
$(href).addClass("active");
});
if (window.location.hash.substr(1) != "") {
$("a[class^=menu],div[class^=content]").removeClass("active");
$('a[href="' + window.location.hash.substr(1) + '"]').addClass("active");
$("#" + window.location.hash.substr(1)).addClass("active");
}
});
.container {
margin: 0 auto;
background-color: #eee;
border: 1px solid lightgrey;
width: 20vw;
height: 90vh;
font-family: sans-serif;
position: relative;
}
header {
background-color: lightgreen;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.bottom-navbar {
position: absolute;
bottom: 0;
width: 100%;
padding: 6px 0;
overflow: hidden;
background-color: lightgreen;
border-top: 1px solid var(--color-grey-dark-3);
z-index: 50;
display: flex;
justify-content: space-between;
}
.bottom-navbar>a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
}
.bottom-navbar>a.active {
color: black;
}
.menu-1.active,
.menu-2.active,
.menu-3.active {
color: black;
}
.content-1,
.content-2,
.content-3 {
display: none;
}
.content-1.active,
.content-2.active,
.content-3.active {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<header>My header</header>
<div class="main-content">
<div class="content-1 active" id="firstPage">House content</div>
<div class="content-2" id="secondPage">Map content</div>
<div class="content-3" id="thirdPage">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
UPDATE
The URL solution is essentially answered in the link below, although the suggestions in the comments helped tremendously in solving most of the problem before the browser was refreshed.
Selecting the anchor tag of a particular href using jQuery

As the buttons aren’t separated in a way that allows them to affect visibility of the content, you’ll need to explicitly address the particular element whose visibility you want to show. I’d suggesting inspecting the class of the menu item referenced by $(this) and following it by a conditional branch that handles the case for each of menu-1, menu-2, and menu-3, referencing their respective contents to set them active, e.g., $(‘.content-1’).addClass(‘active’)
As for persistence, you can store a variable that keeps track of what item is currently active and then activate that on page load through conditionals. Give this a read to see how to store that info: https://stackoverflow.com/a/16206342/12380239

javascript multiple time on same page

I need help with a "Show and hide div on link click using jQuery" being used multiple times on the same page. Using this guide https://coding-tips.com/javascript/show-hide-div/ I have added a Show and hide div link to a page that when clicked adds a WHMCS product to the cart using a hidden iframe and the add to cart URL for the product provided by WHMCS. When clicked the link is hidden and a new link with green text and a tick is displayed so the user knows it has been added to the cart.
I have tried changing the class for the second link but nothing I try allows the two links to work separately from each other. I though if each link had it's own class they would work independently of each other but this does not seem to be the case in my tests.
I want to duplicate the link and add it to the same page for each product.
HIDDEN IFRAME:
<iframe style="display:none;" name="target"></iframe>
LINK:
ADD TO CART
✔ ADD TO CART
JAVASCRIPT:
$(function() {
$('.showClick').click(function() {
$('.hidden').show();
$('.show').hide();
});
$('.hideClick').click(function() {
$('.hidden').hide();
$('.show').show();
});
});
CSS:
/* Hide Added To Cart Link */
.hidden {
display:none;
}
/* Make Link Look Like Button */
.showClick.show {
padding: 15px 30px;
border: 1px solid #fff;
border-radius: 2px;
letter-spacing: 2px;
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.61);
cursor: pointer;
}
.showClick.show:hover {
background-color: #9b9b9b;
border: 1px solid #9b9b9b;
}
.hideClick.hidden {
padding: 15px 30px;
border: 1px solid #fff;
border-radius: 2px;
letter-spacing: 2px;
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.61);
cursor: pointer;
background-color: green;
}
.hideClick.hidden:hover {
background-color: #9b9b9b;
border: 1px solid #9b9b9b;
}
It works great but I can not get a second link to work for a different product. If you click the first link it changes the hide/show state of the second products link and visa versa. My goal is to have lots of product links on the page that when clicked add different products to the WHMCS cart without the user having to leave the page. Each product link clicked will be green with a tick so the user knows what they have added to the cart.
EDIT
Using your help I was able to create the below method to change the text on the link after it was clicked. This worked independently for each link on the page using onclick="func(this)"
This is my code:
<iframe style="display:none;" name="target"></iframe>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
$(e).text('ADDED TO CART');
}
</script>
<a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>

Using your help I was able to create the below method to change the text on the link after it was clicked. This worked independently for each link on the page using onclick="func(this)"
This is my code:
<iframe style="display:none;" name="target"></iframe>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
$(e).text('ADDED TO CART');
}
</script>
<a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>

Links should have the same css classes then, but you need to use different ids for each link and access to their id's when clicked like this, inside your .on('click') function;
let id = $(this).attr('id');
Duplication must be done programmatically and when doing that assign different ids & different href attributes e.g;
let products = [
{
id: 2,
link: 'pid=144'
},
{
id: 3,
link: 'pid=154'
}
];
for (let i = 0; i < products.length; i++) {
const element = products[i];
let strElement = '<a id=' + (i + 1) + ' href="https://example.org/cart.php?a=add&' + element.link+'" target="target" class="showClick show"> Click to Add to Cart </a>';
// Appending to body element here but if you have a container div, use it's id with a # prefix
$('body').append(strElement);
}

Re-closing hidden content

I have a large document where this is implemented A LOT. I am hoping there is a way to simply edit the JavaScript somehow, so I have less editing.
Basically, clicking on a line of text opens the hidden text beneath it. You can close and re-hide the text by clicking on that same line of text... THAT is the ONLY way I want it to operate. As it is now, you can click on the hidden text anywhere and that will also close it. That is becoming a problem because I have interactive content in the hidden text area, and an accidental click in the wrong area will collapse it all.
.results_container {
cursor: pointer;
line-height: 21px;
}
.hidden>span {
display: none;
}
.visible>span {
cursor: default;
display: block;
line-height: 18px;
background: #f5f5f5;
padding: 15px;
margin: 10px 0px 32px 25px;
}
<div class="results_container">
Click Me to show hidden content
<span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>
Full Fiddle
NOTE: On the fiddle, my JavaScript is at the end, under the pasted-in jQuery... sorry, that's the only way I could get it to work.

See the fiddle or below snippet:
https://jsfiddle.net/ejbdb128/6/
By checking against "this" in regards to the parent selector, you can filter out when you click on the child "span" element. I should note a caveat to this is if you click anywhere outside the "span" and in the div element, it will hide the span, even if you don't click just on the "Click Me" text..
/* SCRIPT for HIDDEN DESCRIPTIONS for RESULTS */
$(document).ready(function() {
"use strict";
$('.results_container').addClass("hidden");
$('.results_container').click(function(e) {
if (e.target != this) {
return false;
}
var $this = $(this);
if ($this.hasClass("hidden")) {
$(this).removeClass("hidden").addClass("visible");
} else {
$(this).removeClass("visible").addClass("hidden");
}
});
});
.results_container {
cursor: pointer;
line-height: 21px;
}
.hidden>span {
display: none;
}
.visible>span {
cursor: default;
display: block;
line-height: 18px;
background: #f5f5f5;
padding: 15px;
margin: 10px 0px 32px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results_container">
Click Me to show hidden content
<span>I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.</span>
</div>

Add the click handler to to an external event and use that to hide . By the way, jQuery has built in functions hide and toggle for hiding elements.
HTML:
<div class="results_container">
<span class="clickme">Click Me to show hidden content</span>
<span class="hideme">
I am hidden in span tags. You can close me by clicking anywhere in this text, however, I ONLY want to close the same way I opened; by clicking "Click Me to show hidden content.
</span>
Javscript:
$(document).ready(function(){
"use strict";
$('.hideme').hide();
$('.clickme').on('click', function() {
$('.hideme').toggle();
});
});
Fiddle here: https://jsfiddle.net/fLj6c4q7/

jQuery to check for multiple strings with HTML textarea

Im working on a 'what you see is what you get' application. You code in one box and the output is displayed in another. I need to check if a user has typed specific text within an HTML textarea, and if it's correct is will make a button visible.
So far, when the user types text-align:center; the button is made visible. I can't work out so the user HAS to type 2 sets of text.
So far i have this:
$(document).ready(function(){$(".textArea").keyup(function() { // directed at the textArea div tag
if ($(this).val().indexOf('text-decoration:underline;' && 'text-align:center;') != -1) { // if the text matches those 2 strings
$(".continue").css("visibility", "visible"); // make button visible
}
else {
$(".continue").css("visibility", "hidden"); // keep it hidden if strings haven't been produced
$(".correct").css("display", "block");
}
});
});
.continue{
background-color: #ef6d3b;
width: 6em;
text-align: center;
font-size: 15px;
border: none;
height: 25px;
color: #000000;
outline: none;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
position: relative;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="codeArea">
<div class="correct">
<textarea class="textArea">
<html>
<body>
</body>
</html>
</textarea>
</div>
</div>
<button class="continue" type="button">Continue</button>

You are using wrong expression for your if statement..
if ($(this).val().indexOf('text-decoration:underline;' &&
'text-align:center;') != -1)
which is evaluated same as
$(this).val().indexOf('text-align:center;') != -1
what you should really do is
$(this).val().indexOf('text-decoration:underline;')!=-1 &&
$(this).val().indexOf('text-align:center;')!=-1

How do I link to a JavaScript function?

I have JavaScript that makes it so that when you click on a string of text it creates a div that slides down and expands an area bellow it to show more information. I want to be able to have a link on a different page of my website that when clicked takes you to the page with the string of text ALREADY clicked on and expanded. How would I do this?
JSFidldle: http://jsfiddle.net/hr07tn16/2/
JavaScript:
$('.moreInfo').on('click', function(){
var target = $(this).data('target');
$('.expandable').not('.' + target).slideUp(500, function(){
$('.' + target).slideDown(500, function(){
});
});
});
HTML
<div class="moreInfo" data-target="red">More Info</div>
<div class="moreInfo" data-target="green">More Info</div>
<div class="expandable red" style="display: none;">RED</div>
<div class="expandable green" style="display: none;">GREEN</div>
CSS:
.expandable {
width: 997px;
height: 300px;
}
.red {
color: white;
position: relative;
top: 380px;
border: 1px solid rgba(0,0,0,.1);
}
.green {
color: white;
position: relative;
top: 380px;
border: 1px solid rgba(0,0,0,.1);
}

You could add a hash to the link on your other page and, if the hash is present trigger the click. You could also use a flag to use the animation or not depending on whether is an automatic trigger or a manual one.

One thing you can try is redirecting to that page with a POST variable set indicating the element you would like expanded. Then on the page being directed to, have an onLoad() function which checks if the variable is set and then does what you want if it is.
onLoad()