Develop Reference

jquery slidetoggle() not hiding :before element

All of my elements hide and show correctly using slidetoggle(), EXCEPT for my li:before. I've tried forcing the overflow, visibility, display, etc on the :before and the li, and nothing is helping, it still shows the bullets set using the :before class. What needs to happen to hide these bullets when slidetoggle() is activated/deactivated?
jQuery(document).ready(function($) {
$("#read-more").click(function(){
$(".careers-position").slideToggle(800);
return false;
});
});
ul {
line-height: 2.4em !important;
margin-left: 20px;
padding: 0 0 23px 1em;
}
li {
list-style: none !important;
color: #656565;
}
li:before {
content: "";
background: #9e9e9e;
width: 6px;
height: 6px;
display: block;
position: absolute;
left: 18px;
margin-top: 16px;
border-radius: 20px;
overflow: hidden;
backface-visibility: hidden;
}
.careers-position {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="careers-position">
<h3>Pilot</h3>
Position information will go here.
We are an equal opportunity employer and all qualified applicants will receive consideration for employment.
<strong>Requirements:</strong>
<ul>
<li>Multi Commercial (ATP preferred)</li>
<li>First Class Medical</li>
<li>Passport</li>
<li>90 day currency</li>
<li>Clean FAA record</li>
</ul>
</div>
<div class="careers-read-more">
<a class="quick-btn" id="read-more" href="#">Read More</a>
</div>

Add position relative:
.careers-position {
display: none;
position: relative;
}
Demo

Here look at this fiddle https://jsfiddle.net/wfccp58p/4/
ul { line-height: 2.4em; margin-left: 20px;padding: 0 0 23px 1em;list-style-type: none;}
I removed the li:before and added the list-style-type to the ui. Not sure if you still wanted some of the LI:Before pseudo stuff, but this fixes your issue.

Responsive nav not appearing as intended

I am trying to create a responsive nav bar, but I am coming across issues making it appear in the way intended.
Here is an image of how it looks when window is maximized:
Here is an image when the window is resized:
Here is an image of what I want the page to look and function like:
Issues:
As the images show, the header currently shows the links "stretches, mobility" etc, when I want it to display "Join / Log In" etc (image 3).
When menuis clicked, I want the nav to dynamically display the other links.
Here is what I have tried so far: https://jsfiddle.net/hudnybux/

Ok, I think I got it to look almost exactly like your screenshots. One of the main things I had to do was move your nav-trigger up within html.
<div id="header-main">
<div id="nav-trigger"><span>Menu</span></div>
<nav id="main-navigation" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
<!--<nav id="nav-mobile"></nav>-->
</div>
Technically you no longer need nav-mobile nav. I also fixed your caret triangle next to "menu". It needed a height and width of 0.
width: 0;
height: 0;
Edit:
I have revisited my solution. Just as a suggestion, I am recommending css transitions instead of jQuery slideDown and slideUp. You were already applying a class and that is all we need to create dynamic animations. jQuery's methods apply the styles inline and frankly leave you with less flexibility.
https://jsfiddle.net/qnco3x7e/8/

You will need to add another media query
#media all and (max-width: 460px) {
nav#main-navigation li {
display:block;
border-bottom: 1px solid #fafafa;
}
}

You can use flexbox css properties. It's very powerfull. http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Writing others' code for them is not in the spirit of Stack Overflow, but, as I prefer teaching by showing and not telling, I went ahead and did the task for you. Observe how I changed your implementation and learn as much as you can!
The Strategy
Use the same HTML markup for the main menu (Stretches, Mobility, Posture) on both large and small screen widths, instead of using JavaScript to duplicate it in two places.
Use the same CSS for both menus as a starting point; in the media query for small screen sizes, change the main menu to be horizontal
Show everything by default; use display: none only on screen sizes you don't want to show something on.
JSFiddle
$(document).ready(function() {
$("#main-nav-mobile-trigger span").click(function() {
$(this).toggleClass("open");
if ($(this).hasClass("open")) {
$("#main-nav").addClass("open").slideDown(250);
} else {
$("#main-nav").removeClass("open").slideUp(250);
}
});
});
.pageOverlay {
width: 900px;
margin: 0 auto;
}
/******************/
nav {
background-color: #fefefe;
/*NAV COLOUR*/
padding: 10px 0;
border-bottom: 1px solid #e3e3e3;
text-align: center;
}
nav ul li a {
color: #a4a4a5;
text-decoration: none;
}
nav ul li a:hover {
color: black;
}
nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline-block;
padding: 0 2px;
}
nav li:last-child {
border-right: none;
}
nav a {
display: block;
color: white;
padding: 10px 20px;
}
/****************************************************************/
/* Menu CSS which pops up when window is resized */
#main-nav-mobile-trigger {
text-align: center;
}
#main-nav-mobile-trigger span {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
text-transform: uppercase;
}
#main-nav-mobile-trigger span:after {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 10px;
content: "";
border-left: solid 10px transparent;
border-top: solid 10px #e3e3e3;
border-right: solid 10px transparent;
}
#main-nav-mobile-trigger span:hover {
background-color: #e3e3e3;
}
#main-nav-mobile-trigger span.open:after {
border-left: solid 10px transparent;
border-top: none;
border-bottom: solid 10px #fff;
border-right: solid 10px transparent;
}
#media all and (min-width: 901px) {
#top-nav {
text-align: right;
}
#main-nav {
text-align: left;
}
#main-nav-mobile-trigger {
display: none;
}
}
#media all and (max-width: 900px) {
#main-nav:not(.open) {
display: none;
}
#main-nav ul {
display: block;
}
#main-nav li {
display: block;
border-bottom: solid 1px #e3e3e3;
}
#main-nav li:last-child {
border-bottom: none;
}
#main-nav a {
padding: 10px 30px;
}
#main-nav a:hover {
background-color: #e3e3e3;
color: #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay">
<nav id="top-nav" role="navigation">
<ul>
<li>Join / Log In</li>
<li>Help</li>
<li>Shop</li>
</ul>
</nav>
<div id="main-nav-mobile-trigger"><span>Menu</span></div>
<nav id="main-nav" role="navigation">
<ul>
<li>Stretches</li>
<li>Mobility</li>
<li>Posture</li>
</ul>
</nav>
</div>
<!-- pageOverlay closed-->
The HTML
I removed your container <div>s (#header and #header-main), as they serve no purpose as far as layout is concerned.
There are now only three parts to the header area. In order they are:
#top-nav - Join/Login, Help, Shop
#main-nav-mobile-trigger - MENU button
#main-nav - Stretches, Mobility, Posture
The JavaScript
When the MENU button (#main-nav-mobile-trigger span) is clicked:
Toggle its .open class.
If it has the .open class,
Add #main-nav's .open class.
Otherwise,
Remove #main-nav's .open class.
The CSS
You had duplicates of the styling rules for each horizontal menu (formerly #nav-main and #main-navigation, which are very easy to confuse). These are now combined into one set of rules under the more general selector, nav. Additionally, their text-align is set to center by default (the desired alignment on small screen widths).
For big screen widths (#media all and (min-width: 901px)):
Align #top-nav to the right and #main-nav to the left.
Hide the MENU button.
For small screen widths (#media all and (max-width: 900px)):
If #main-nav doesn't have the .open class, hide it.
Display the menu items in #main-nav horizontally.
I hope this helps you. Best of luck with your future adventures in front-end development!

Change elements in a class one-at-a-time?

I'm working on a reference project with tooltip notes throughout a text, and I'd like for the text affected by a note to be highlighted when the tooltip is displayed. My current code has a bug where displaying the first note highlights the correct text, but displaying a subsequent note highlights the text from the first note, not its own. I'm new to Javascript so it's likely I made a rookie mistake, but I think the problem is that I'm using getElementById which can only work once, but if I should be using getElementsByClassName instead, how do I tell it which node to get when? I know getElementsByClassName returns the whole array, and I need a way to only return one node at a time. I haven't yet been able to figure it out myself so help is very much appreciated. Below is a pared-down example of my code that demonstrates my problem.
<!DOCTYPE html>
<html>
<head>
<style>
mark {
background-color: white
}
/* now <mark> is only effective at my discretion */
sup {
vertical-align: text-top;
font-style: italic
}
a:link {
text-decoration: none
}
a:visited {
color: blue
}
a:hover {
text-decoration: underline
}
/* these describe the appearance and behavior of tooltips */
a.tooltips {
position: relative;
display: inline
}
a.tooltips span {
position: absolute;
width: 70px;
color: #FFFFFF;
background: #000000;
height: 25px;
line-height: 25px;
text-align: center;
visibility: hidden;
}
a:hover.tooltips span {
visibility: visible;
font-size: 0.8em;
top: 22px;
left: 50%;
margin-left: -43px;
z-index: 999;
}
a.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
</style>
<script>
function seeNote() // <mark> is now activated
{
document.getElementById("note").style.backgroundColor = "yellow"
}
function hideNote() // <mark> is now deactivated
{
document.getElementById("note").style.backgroundColor = "white"
}
</script>
<title>Bug Demonstration</title>
</head>
<body>
Mousing over note <i>a</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">a</sup><span>note <i>a</i></span></a>
<mark id="note">affected text</mark> as intended,
<br> but mousing over note <i>b</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">b</sup><span>note <i>b</i></span></a>
<mark id="note">note <i>a</i>'s text</mark> instead of note <i>b</i>'s text.
</body>
</html>

Problem solved! I saw something similar to my intended effect done on another website and looked at its source; it turns out there's a way to do this without any scripting at all! The whole effect can be accomplished merely with extra styling of the <a> elements in CSS, like so:
a. Delete all JavaScript
b. Delete all <mark> tags and their CSS and move each </a> to replace each </mark>
c. Delete href="#" from all <a> tags
d. Insert this code into the CSS:
/* affected text highlighted... */
a:hover.tooltips {
background-color: yellow;
}
/* ...but not the superscript letter */
a:hover.tooltips sup {
background-color: white;
}

Change one link into two on hover

I'm trying to create a link that changes into two links when you hover over the text. You can see something like what I want to do here: https://www.kenzo.com/en/ You can see that the collections link changes into two separate links for men and women when you hover over the link. At the moment I have managed to create a link that separates into two words when hovered over but not into two links.
Here is my HTML code:
<li><span>Collection</span></li>
And here is my CSS code:
#nav-item1:hover span {
display:none;
}
#nav-item1:hover:before {
content: "Men Women";
}
So the text changes which is great, but I haven't quite figured out how to turn the text into two separate links. I'm not sure if I have to use JS for this or not, as my JS knowledge terrible.
Any ideas?

If I understand you right you can try something like this:
li {
list-style: none;
}
li a {
display: none;
margin-left: .3em;
}
li:hover span {
display: none;
}
li:hover a {
display: inline-block;
}
<li>
<span>Collection</span>
Man
Women
</li>

Okay so here is a small breakdown of how you can achieve this.
There is a block element on the top of things.
Then there are two hidden elements that are children of the block element.
And when you hover over the block element the other ones are shown.
You can also hide the child element that contains the text on hover.
.block:hover .hide {
display: inline;
}
.block {
color: black;
font-size: 20px;
}
.hide {
display: none;
}
<div class="block">
<span class="default text">Hover</span>
<a class="hide" href="#">Snowball</a>
<a class="hide" href="#">Kitten</a>
<div>

.splitted {
display: none;
}
.links:hover .one-link {
display: none;
}
.links:hover .splitted {
display: inline;
}
<span class="links">
Collection
Men
Women
</span>

Please try this
#nav-item1{
position: relative;
}
#nav-item1:before,
#nav-item1:after{
display: none;
position: absolute;
top: 100%;
color: #000;
}
#nav-item1:hover:before,
#nav-item1:hover:after{
display: block;
}
#nav-item1:before{
content: 'Men';
right: 50%;
}
#nav-item1:after{
content: 'Women';
left: 50%;
color: green;
}
<ul>
<li><span>Collection</span>
</li>
</ul>

Show one element if another is above a certain height

I have a following HTML:
<span class="day-number">{{day-number}}</span>
<div class="event-box">
<div class="event-container">
</div>
<div class="more-events">more ...</div>
</div>
Event-container is filled with an unknown number of .event elements like the following:
<div class="event">{{event-name}}</div>
I want to show or hide the .more element based on if the .event-container has a height of over 76px (equal to the height of four .event elements stacked).
The styling for the above elements:
.event {
text-align: left;
font-size: .85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: whitesmoke;
padding: 0 1px;
overflow: hidden;
margin-bottom: 2px;
cursor: pointer;
}
.event-box {
max-height: 76px;
overflow: hidden;
position:relative;
}
.event-box .more-events {
height: 10px;
position: absolute;
right: 0;
bottom: 10px;
display: none;
z-index: 5;
}
No styling for .event-container
I can do what I want with Javascript (jQuery):
$(".event-box").each(function(){
var $this = $(this);
if($this.children(".event-container").height() > 76){
$this.children(".more-events").css("display", "block");
} else {
$this.children(".more-events").css("display", "");
}
});
And run that every time a make a change, but I'd rather do it with CSS.
Is this possible? Maybe with pseudo elements or media queries or something?
JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/

If changing the markup is acceptable there is a possibility to achieve a somewhat similarly looking page without using JavaScript to show or hide, here is the Fiddle
I have removed <div class="more-events">more ...</div> line and made elements of event class to get hide when it is necessary I also made them to appear when hovering over more ... .
The CSS I have added:
.event:nth-child(n){
display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
display: block;
}
.event:nth-child(5){
text-indent: -9999px;
position: relative;
display: block;
color: black;
border: none;
background-color: #FFF;
}
.event:nth-child(5)::before{
position: absolute;
text-indent: 0px;
content: "more ...";
display: block;
}
.event:nth-child(5):hover{
position: static;
text-indent: 0;
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: whitesmoke;
}
.event:nth-child(5):hover::before{
display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
display: block;
}
And for .event-box class I have commented out max-height: 76px; because in my browser 76px was not equal to the height of four .event elements stacked. Also removed update function.

I dont think it's possible using css only. but for better approach in what you are trying to do.instead of using max-height for .event-box I use this css which is add display:none to +4.event on your event container:
.event-box .event-container .event:nth-child(n+5){
display: none;
}
and now when it's more than 4 .event your more text appears. FIDDLE
UPDATE:
HERE I make little change in you js as well and make it more professional,

while you are using template to render the page, maybe you can do it as follow
<div class="event-container">
{{#each events}}
<div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}
and
function canshowmore() {
return events.length >= 4;
}