Develop Reference

How to add css slide transition to sidenav menu?

I have a sidenav menu that appears and disappears when the button is clicked. Everything works fine, but I can't understand why the transition to css is not working. As you can see in the example below the menu appears and disappears sideways, but I would like to add a transition in the css. What am I doing wrong ?
Sorry for mistakes, I'm new and learning. I appreciate any help. Thanks.
var menu = document.querySelector(".mob_menu_button");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mts_mobile_menu");
if (!x.classList.contains("active")) {
x.classList.add("active");
x.classList.remove("hide");
menu.innerHTML = "<span>Close Menu<span>";
} else {
x.classList.add("hide");
menu.innerHTML = "<span>Open menu</span>";
}
}
document.addEventListener("click", function(e) {
var x = document.getElementById("mts_mobile_menu");
if (e.target.id !== "mts_mobile_menu" && x.classList.contains("active")) {
x.classList.add("hide");
x.classList.remove("active");
menu.innerHTML = "<span>Open menu</span>";
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item>a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover>a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
.mob_menu_button {
display: flex;
align-content: flex-end;
justify-content: center;
align-items: flex-end;
width: 20%;
background: #282c33!important;
font-weight: 500!important;
position: absolute;
top: 20px;
right: 20px;
}
.icn_button {
margin: 0;
font-size: 14px;
}
.icn_button:before {
margin: 0;
}
.icn_button:after {
margin: 0;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_mob_container {
display: flex;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
}
.mts_sidenav_box {
display: block;
width: 100%;
}
.mts_sidenav_content {
display: none;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: relative;
width: 75%;
height: 100vh;
}
.mts_sidenav_content.active {
display: block!important;
left: 0px;
}
.mts_sidenav_content.hide {
left: -100%;
}
<button onclick="mobile_menu(event)" class="mob_menu_button">Open menu</button>
<div class="mts_mob_container">
<div id="mts_mobile_menu" class="mts_sidenav_content">
<div class="mts_sidenav_box">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid" />
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

It looks like you are toggling the element via an active class that uses display: none to display: block which you can't animate on it's own.
Instead of display, you could use transform: translateX and opacity to slide and fade in the menu. You'll also want to set pointer events to prevent accidental clicks while it's "hidden". And you might need overflow: hidden on the parent/body.
.your-class {
transition: all 0.5s ease;
transform: translateX(300px);
opacity: 0;
pointer-events: none;
}
.your-class.active {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}

I found a solution: I changed the Js and Css a bit for this, I leave the working code for anyone who has the same problem.
var menu = document.querySelector(".mob_menu_button");
function mobile_menu(e) {
e.stopPropagation();
var x = document.getElementById("mts_mobile_menu");
var y = document.getElementById("overlayx");
// For var x
if (!x.classList.contains("active")) {
x.classList.toggle("active");
menu.innerHTML = "<span>Close Menu</span>";
} else {
x.classList.remove("active");
menu.innerHTML = "<span>Open Menu</span>";
}
// For var y
if (!y.classList.contains("over")) {
y.classList.toggle("over");
} else {
y.classList.remove("over");
}
}
// Permette la chiusura del menu cliccando fuori dall'area
document.addEventListener("click", function (e) {
var x = document.getElementById("mts_mobile_menu");
var y = document.getElementById("overlayx");
// For var x
if (e.target.id !== "mts_mobile_menu" && x.classList.contains("active")) {
x.classList.toggle("active");
menu.innerHTML = "<span>Open Menu</span>";
}
// For var y
if (e.target.id !== "mts_mobile_menu" && y.classList.contains("over")) {
y.classList.toggle("over");
}
});
/*Items menu*/
.user_menu {
display: flex;
flex-direction: column;
}
/*Menu header info*/
.display.name {
font-size: 15px;
font-weight: 500;
color: #303238;
}
.display.mail {
font-size: 13px;
color: #3d5afe;
}
hr.solid {
border-top: 1px solid #e0e0e0;
margin: 10px 0px 10px 0px;
}
/*Text Link css*/
.user_menu.item > a {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 0;
font-size: 13px;
color: #75777d;
}
.user_menu.item:hover > a {
color: #2e323a;
}
/*Icon Button Toggle Menu*/
button.mob_menu_button {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
width: 20%;
background: #282c33!important;
color: #fff;
font-weight: 500!important;
top: 40px;
right: 40px;
position: absolute;
}
.mob_menu_button > span {
z-index: 1000;
}
/*Icon Items Menu*/
.icn_menu:before,
.icon_menu:after {
margin: 0px;
padding: 0px;
font-size: 16px;
}
.icn_menu {
margin-right: 10px;
display: flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
/* User Menu For header website */
.mts_mob_container {
display: flex;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
background: #000000d6;
opacity: 0;
transition: 0.3s;
}
.mts_mob_container.over {
opacity: 1;
}
.mts_sidenav_box {
display: block;
width: 100%;
}
.mts_sidenav_content {
left: -100%;
padding: 20px;
background-color: #fff;
min-width: 160px;
overflow-x: hidden;
overflow-y: auto;
z-index: 999;
position: relative;
width: 75%;
height: 100vh;
transition: .3s;
}
.mts_sidenav_content.active {
left: 0;
}
.mts_sidenav_content.hide {
left: -100%;
}
<button onclick="mobile_menu(event)" class="mob_menu_button"><span class="btn">Open Menu</span></button>
<div id="overlayx" class="mts_mob_container">
<div id="mts_mobile_menu" class="mts_sidenav_content">
<div class="mts_sidenav_box">
<div class="user_menu header">
<span class="display name">Ciao [display_name]</span>
<span class="display mail">[display_email]</span>
</div>
<hr class="solid" />
<div class="user_menu item">
<a href="/account">
<i class="icn_menu fa-regular fa-user"></i>
<span class="link_text">Dashboard</span>
</a>
</div>
<div class="user_menu item">
<a href="ordini">
<i class="icn_menu fa-regular fa-basket-shopping"></i>
<span class="link_text">I miei ordini</span>
</a>
</div>
<div class="user_menu item">
<a href="libreria">
<i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
<span class="link_text">Downloads</span>
</a>
</div>
<div class="user_menu item">
<a href="impostazioni">
<i class="icn_menu fa-regular fa-gear"></i>
<span class="link_text">Impostazioni</span>
</a>
</div>
<div class="user_menu item">
<a href="wp-login.php?action=logout">
<i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
<span class="link_text">Logout</span>
</a>
</div>
</div>
</div>
</div>

Music player skip forward/backward functionality JQuery

New project this time, I'm working on a music player widget and I've hit a wall. I'm looking to make it so that the player can cycle the active track with skip forward and backward buttons and I know that it's easier to do when you put your elements in a list, but I still have no idea. I haven't yet hooked this up to any sort of tracklist or api or anything like that, right now I want to get the visual functionalities working.
Here's the Codepen as well.
function currentlyPlaying(target) {
var current = target.parent();
$('.playingTitle').text(current.children('.title').text());
$('.playingAuthor').text(current.children('.author').text());
}
$(document).on('click', '.play', function(e){
$('.pause').attr('class', 'icon play');
$(e.target).attr('class', 'icon pause');
currentlyPlaying( $(e.target));
});
$(document).on('click', '.playing', function(e){
$('.playing').attr('class', 'playingPaused paused controls');
});
$(document).on('click', '.paused', function(e){
$('.paused').attr('class', 'playingPaused playing controls');
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content:url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content:url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls{
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content:url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content:url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</div>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>

I have removed the div tags from the inside of you li tags as they did not serve any purpose except to complicate the HTML structure.
You could show a selected song in your play list and then wire up the previous and next buttons to do something.
Here is an example of how:
$(".song").on("click", function() {
$(".selected").removeClass("selected");
$(this).addClass("selected");;
})
$(".skipBack").on("click", function() {
var target = $(".song.selected").prev(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
$(".skipForward").on("click", function() {
var target = $(".song.selected").next(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.song.selected {
background: #aaaaaa;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content: url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content: url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls {
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content: url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content: url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>

CSS deactivating href links with unrelated line, "left: 0;"

Two divs on my homepage contain nav elements: the .header-nav and the .visualizer.bars nav. For some reason my .header-nav links weren't active, and I've narrowed down the culprit to a single line in my css file: .bars {left:0;}.
When I remove this line, the links in my .header-nav work fine. I have no idea what's linking these two div elements, but I need that line in place for the visualizer effect to work properly.
Everything I've seen in my research indicates a problem with the JavaScript, but unlinking the JS doesn't affect the hrefs so I don't think that's it.
What can I do to keep all links active with the correct styling?
https://jsfiddle.net/vespertron/Leebz05q/
HTML
<header>
<div class="header-left">
<h3>This Is A Site </h3>
<nav class="header-nav">
<ul>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="header-right">
<form class="login">
<fieldset>
<input type="text" name="username" tabindex="1" placeholder="Username">
</fieldset>
<fieldset>
<input type="text" name="password" tabindex="2" placeholder="Password">
</fieldset>
<fieldset>
<button type="submit" tabindex="3" value="submit">Login</button>
</fieldset>
</form>
</div>
</header>
<main>
<p class="blurb">stuff that makes me sound like a badass</p>
<div class="visualizer">
<p>What am I up to?</p>
<nav>
<ul class="bars">
<div class="bar">
Link 1
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 2
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 3
<li>
<a href="http://www.dappergrind.com" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 4
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 5
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
</ul>
</nav>
</div>
</main>
<footer>
<span>Copyright © 2018, Entity</span><br />
Privacy
</footer>
<script src="js/script.js"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
var showWidth = 1;
if(showWidth == 1) {
$(document).ready(function() {
$(window).resize(function() {
var width = $(window).width();
document.getElementById('output_width').innerHTML="Window Width:"+width.toString();
});
});
}
</script>
CSS
html,
body {
background-color: #22201d;
background-image: url(../img/leather.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: #b7b7b6;
font-family: 'Playfair Display SC', serif;
}
a {
color: #686766;
text-decoration: none;
}
a:hover {
color: #b7b7b6;
}
a:after {
color: #141311;
}
li {
list-style: none;
}
header {
height: 100px;
letter-spacing: 1em;
}
.header-left {
float: left;
}
form {
float: right;
}
fieldset {
border: 0 none;
}
input[type=text] {
float: right;
color: #686766;
}
.header-nav ul {
clear: both;
}
.header-nav li {
float: left;
}
main p.blurb {
font-size: 2rem;
text-align: center;
letter-spacing: 1em;
}
.visualizer {
text-align: center;
font-weight: bold;
letter-spacing: .5em;
}
.bars {
position: fixed;
top: 30px;
right: 0;
bottom: 75px;
left: 0;
margin: 10px auto;
text-align: center;
overflow: hidden;
}
.bars::before {
content: "";
display: inline-block;
height: 100%;
}
.bar {
position: relative;
display: inline-block;
vertical-align: bottom;
width: 15%;
height: 50%;
min-height: 30px;
background: #800000;
opacity: 0.7;
-moz-opacity: 70%;
-webkit-opacity: 70%;
-webkit-transition: height 0.5s ease-out;
color: #141311;
padding-top: 10px;
font-family: 'Anton', sans-serif;
font-size: 1.75em;
writing-mode: vertical-lr;
text-orientation: upright;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0;
transition: 0.75s ease-out;
box-shadow: 0px -3px 4px #141311;
}
.bar:hover {
opacity: 1;
-moz-opacity: 100%;
-webkit-opacity: 100%;
color: #b7b7b6;
transition: .25s ease-in-out;
}
.bar:after {
color: #686766;
}
.link-spanner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
footer {
position: fixed;
height: 75px;
width: 100%;
bottom: 0;
text-align: center;
letter-spacing: .2em;
}

Jquery Toggle and Hide

I want to create something in which when a user clicks on a picture it would display a set of info and when they click the picture again it would disappear and also if they were to click on a different image when one is already displayed, it would hide that images info and display the info for the recently clicked picture. I'm really new to JQuery and JS so I have problems thinking outside the box haha.
I have the display down, easily done with the .toggleClass(); but I don't know how to do the rest. It's exactly like a simple hover over but with clicks. Also only the first 2 work, since I'm trying to figure out how it works.
Thanks, much love. :)
$(function () {
$('.read').click(function() {
$('.showread').toggleClass('pshow');
});
$('.sew').click(function() {
$('.showsew').toggleClass('pshow');
});
});
.aboutmewrapper {
background: #2F3347;
height: 100vh;
position: absolute;
width: 100%;
}
.imagewrap {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.imagesec {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
flex-direction: column;
}
.imagesec i {
color: #ececec;
font-size: 100px;
}
.showread {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.showsew {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.psections {
position: relative;
bottom: 20%;
font-size: 25px;
}
.showread:before, .showsew:before {
content: '';
width: 5px;
height: 40px;
border-radius: 20px;
background-color: #FE715D;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
}
.pshow {
opacity: 1;
}
.phide {
opacity: 0;
}
.imagesec img {
height: 200px;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
>
<div class="aboutmewrapper">
<div class="imagewrap">
<div class="imagesec">
<img class="read" src="https://i.imgur.com/3cgLq19.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img class="sew" src="https://i.imgur.com/jnwU44r.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img src="https://i.imgur.com/MoV3QpE.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img src="https://i.imgur.com/yyC2Hjf.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<div class="psections">
<p class="showread">Reading makes you smarter. That's why I read.</p>
<p class="showsew">Believe it or not I sew.</p>
</div>
</div>

I had to dummy a message for image3, but hopefully you get the idea.
$(function(){
//put a delegate listener on the wrapper for all image clicks
$('.imagewrap').on('click', 'img', function(e){
//reference the image in a jquery object
var $img = $(e.target);
//get all the messages
var $messages = $('.psections p');
//construct the class of the message you want to show
var messageClass = '.'+ $img.data('message');
//hide any message other than the one we want
$messages.not(messageClass).removeClass('pshow');
//get the message we should change, and toggle the class, so if it already has it, it will be removed
$messages.filter(messageClass).toggleClass('pshow');
});
});
.aboutmewrapper {
background: #2F3347;
height: 100vh;
position: absolute;
width: 100%;
}
.imagewrap {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.imagesec {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
flex-direction: column;
}
.imagesec i {
color: #ececec;
font-size: 100px;
}
.showread {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.showsew {
color: #ececec;
opacity: 0;
transition: 0.5s all ease;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.psections {
position: relative;
bottom: 20%;
font-size: 25px;
}
.showread:before, .showsew:before {
content: '';
width: 5px;
height: 40px;
border-radius: 20px;
background-color: #FE715D;
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
}
.pshow {
opacity: 1;
}
.phide {
opacity: 0;
}
.imagesec img {
height: 200px;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
>
<div class="aboutmewrapper">
<div class="imagewrap">
<div class="imagesec">
<img class="read" data-message="image1" src="https://i.imgur.com/3cgLq19.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img class="sew" data-message="image2" src="https://i.imgur.com/jnwU44r.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img data-message="image3" src="https://i.imgur.com/MoV3QpE.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="imagesec">
<img data-message="image4" src="https://i.imgur.com/yyC2Hjf.png" alt="">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<div class="psections">
<p class="showread image1">Reading makes you smarter. That's why I read.</p>
<p class="showsew image2">Believe it or not I sew.</p>
<p class="showsew image3">Believe it or not I lift weights.</p>
<p class="showsew image4">Believe it or not I sew.</p>
</div>
</div>

Show and hide not working in Firefox with jQuery version 3.1.0

I'm creating a small radio player using jQuery. You can find the code on codepen. I'm having problems with the code when I run it on Firefox (it works on every other browser). Following part of the JS:
$(".back").click(function(){
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
});
doesn't work. I've never experienced that problem. What might cause this?
$(document).ready(
function() {
$(".middle").click(function() {
$(this).children(".guziki").show();
$("h2").hide();
$("hr").hide();
$("#backbutton").show();
});
$(".back").click(function() {
$("h2").show();
$("hr").show();
$(".guziki").hide();
$("#backbutton").hide();
console.log($(".back").parent())
});
});
var buttons = $("#one, #two").on("click", function() {
buttons.toggle();
});
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio {
background-color: #e0e0e0;
max-width: 25%;
overflow: hidden;
font-family: helvetica;
}
h2 {
color: #212121;
text-align: center;
font-family: 'Bungee Hairline'
}
h1 {
color: #e0e0e0;
text-align: center;
text-transform: uppercase;
padding-top: 2%;
font-family: 'Bungee Hairline', cursive;
font-size: 2em;
}
.top {
background-color: #212121;
height: 50px;
margin-top: -5%;
}
.bottom {
text-align: center;
background-color: #212121;
color: #e0e0e0;
padding: 5px 0;
}
button {
border: none;
background: transparent;
display: block;
margin: 0 auto;
font-size: 40px;
}
.guziki {
text-align: center;
display: none;
}
#two {
display: none;
}
.fa-chevron-left {
position: absolute;
left: 20px;
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio>
<audio id="player2" src="http://stream.techno.fm/live.mp3"></audio>
<div id="radio">
<div class="top">
<h1>radio techno</h1>
<div id="backbutton">
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="middle kinetic">
<h2 id="kinetic">Kinetic</h2>
<div class="guziki" id="guzikione">
<button onclick="document.getElementById('player').volume += 0.1">+</button>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle technofm">
<h2 id="technofm">techno.fm</h2>
<div class="guziki">
<button onclick="document.getElementById('player2').volume += 0.1">+</button>
</button>
<button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
<button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
</button>
<button onclick="document.getElementById('player2').volume -= 0.1">-</button>
</div>
</div>
<hr>
<div class="middle">
<h2>uzic</h2>
</div>
<hr>
<div class="middle">
<h2>ballads fm 87,1</h2>
</div>
<hr>
<div class="middle">
<h2>maximum fm 142,2</h2>
</div>
<div class=bottom>
<h4>currently playing</h4>
</div>
</div>
EDIT: I thought it might be a codepen/firefox bug, but even if I run it from my computer, it still doesn't work only in Firefox.

The problem is not with jQuery. The button is so small that you aren't hitting it with your click.
Demo
#backbutton button {
position: absolute;
left: 300px;
min-width: 50px;
min-height: 50px;
background: pink;
}

This is caused by your chevron being repositioned outside the bounds of where Firefox was expecting the button. If you keep the chevron inside the button and position the button then it works.
.fa-chevron-left {
font-size: 30px;
padding-top: 10px;
cursor: pointer;
}
#backbutton {
display: none;
padding-top: 30px;
position:relative;
}
.back {
position: absolute;
left: 20px;
}
http://codepen.io/anon/pen/GjokQp