We Keep Coding

How to toggle div properties by clicking it?

I want to make a window that expands when clicked and closes when clicked again. I am using flask to display all lines of data but that should not be a problem and can actually be ignored. Right now I have it set that when you click the div it expands but once you let go the div closes again. Is there any way I can turn this div into a toggle of some kind many using python or javascript or even CSS?
HTML/Python flask:
<div class="container">
{%for i, value in verb_data.items() %}
<div class="indevidual_verbs">{{ i }} . {{ value }}</div><br>
{%endfor%}
</div>
CSS:
.indevidual_verbs {
cursor: pointer;
}
.indevidual_verbs:active {
padding-bottom: 300px;
}

Depending on what you want to do, you could even use the details html element, that automatically implements that functionality.
If you can use javascript, there is a way to easily toggle a class:
// Get a reference to the container
const container = document.getElementById("container");
// When we click on the container...
container.addEventListener("click", function (e) {
// we can toggle the "open" class
this.classList.toggle("open");
});
/* Just a way to show the container */
#container {
padding: 20px;
border: solid 1px #000;
}
/* Hide the content (you can do it in many different ways) */
#container .inner {
display: none;
}
/* Show the content when the "open" class is added to the container */
#container.open .inner {
display: block;
}
<div id="container">
<div class="inner">
This is just some example text
</div>
</div>

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

Change "Expand" button text color while div is expanded using Javascript

I've created a div which is hidden until the user clicks the "expand" causing the div to expand revealing the content. When the div is expanded the word "expand" changes to "contract" and contracts the div again on click.
I'd also like the color of the clickable text to change from black to red when the div is expanded but I don't know how to do this.
The code I've used is as follows
In the body:
<div class="container">
<div class="header"><span>Expand</span></div>
<div class="content">Here's the contents to be hidden under the expand button</div>
</div>
in the style sheet
.container {
width:100%;
}
.container div {
width:100%;
margin-bottom: 10px;
}
.container .header {
color: #000000;
cursor: pointer;
}
.container .header-expanded {
color: red;
cursor: pointer;
}
.container .content {
display: none;
background-color: #FFFFFF;
color: #333333;
}
and here's the Javascript
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Could someone please show me how to make the "collapse" text appear in red when the div is expanded? Sorry if this is obvious I'm very new to this.
thanks.

You can use .toggleClass(className, state)
A boolean value to determine whether the class should be added or removed.
Declare a CSS class,
.redColor {color : red}
Code
$header.toggleClass('redColor', $content.is(":visible"))

Select text in div on mouse over

I have got a problem, I'd like to select text that is inside a div, here is jsfiddle http://jsfiddle.net/KL6G3/
html:
<div id="connect">some text some text: <div id="select" onmouseover="this.focus();this.select();">when you hover over therer, it gets selected</div></div>
CSS:
#connect {
resize: none;
font-family: 'Ubuntu', sans-serif;
text-transform: uppercase;
position: relative;
top: 4px;
border: none;
}
#connnect:focus {
border: none;
}
#select {
display: inline-block;
}
When I hover over #select, text doesnt get selected, what am I doing wrong?
Thanks

this.focus(); and this.select(); will only work for input and textarea.
Here is a simple way:
Assign contenteditable attribute to that particular element. If user set focus into editable div then content of editable div is selected.
<div contenteditable="true" onmouseover="document.execCommand('selectAll',false,null)" id="connect">some text some text: <div>when you hover over therer, it gets selected</div></div>
JSFiddle Demo

What is the purpose of the selection? To highlight or to copy the text? You can use CSS to highlight and zero clipboard to copy, and combine both of them, if you want highlight and copy to clipboard. Avoid contenteditable if it is not an editable area.

How do I change the text of a div when I hover over a button?

What I have:
8 numbered boxes in a row.
I'm not allowed to use jQuery.
What I want to do:
When the user hovers a numbered box, text changes dynamically inside a div element depending on which box is being hovered on.
Example:
If user hovers over Box 1, the text inside the div element says "Hello"
If user hovers over Box 2, the text inside the div element (same as before) says "World"
Edit: the closest I have is text changing if the user clicks on a button: http://jsfiddle.net/pVN2a/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BluePad</title>
<style type="text/css">
#button1 {
background-color:red;
display:inline-block;
}
#button2 {
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="button1">
Click 1
</div>
<div id="button2">
Click 2
</div>
<div id="textResults">
Click on a button to change text
</div>
<script>
// when #button1 is clicked...
document.getElementById("button1").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Hello World";
});
// when #button2 is clicked...
document.getElementById("button2").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Just Clicked #button2";
});
</script>
</body>
</html>
Am I supposed to use .onMouseEvent in conjunction with some sort of event listener? Sorry, I'm totally new to this. :(

Edited to fit OP's request to change content of a singular box based on hover of other boxes. Using the general sibling combinator, we can select a div with the class results when a box is hovered.
JSFiddle Demo
HTML
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="results"></div>
</div>
CSS
.box1, .box2 { display: inline-block; width: 100px; height: 100px; background: #ccc; }
.results {
width: 250px;
height: 100px;
background: #ccc;
margin-top: 4px;
}
.box1:hover ~ div.results:before {
cursor: pointer;
content: "Hello";
}
.box2:hover ~ div.results:before {
cursor: pointer;
content: "World";
}
Using the General Sibling Combinator.

How about using onmouseover, that's not jQuery.