We Keep Coding

How do I create a Toggle arrow that "opens up" a section to show text as you click on the arrow?

Toggle when closed
Toggle when opened
My goal is to create a toggle arrow like shown in the pictures. The "closed" state includes a line of text with an icon next to it as well as the arrow that then triggers the toggle. The "opened" state includes a few text lines and a picture (a little different than what's shown in the screenshot, but what I struggle with is really just the animation part).
I'm using a template from HTML5 Up which included a similar toggle in the menu bar, so I tried copying the respective HTML and CSS code which didn't work. There were no error messages and the toggle did not appear on the website (see snippet below for CSS).
<span class="opener">Text that appears next to toggle arrow</span>
Is there a way to do this with HTML and CSS or is Javascript required?
#menu ul a.opener, #menu ul span.opener {
-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-decoration: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
position: relative; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
color: #9fa3a6;
content: '\f078';
position: absolute;
right: 0; }
#menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
color: #015a9d; }
#menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
display: block; }
#menu ul a.opener.active:before, #menu ul span.opener.active:before {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg); }

You can do this easily with an html5 element called <details>
<details>
<summary>Click here to see something</summary>
Here's more stuff below :)
</details>

The details tag should be the preferred way of doing it. But if you want to have it more fancy or other reason you can't use the details tag you could create such a dropdown yourself.
Maybe something like this:
CSS
.dropdown {
postion: relative;
}
.dropdown-content {
display: flex;
flex-direction: column;
width: fit-content;
border: 1px solid transparent;
position: absolute;
opacity: 0;
background: white;
z-index: 9;
transition: height 0.5s ease;
transition: opacity 0.3s ease;
height: 0;
overflow: hidden;
}
.dropdown.active .dropdown-content {
opacity: 1;
height: fit-content;
border-color: gray;
}
.dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(90deg);
transition: all 0.3s ease;
}
.dropdown.active .dropdown-trigger > i > svg {
width: 0.7rem;
height: 0.7rem;
transform: rotate(-90deg);
}
HTML
<div class="dropdown">
<button class="dropdown-trigger"> <i><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" /></svg></i> Open</button>
<span class="dropdown-content">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</span>
</div>
https://codepen.io/bluebrown/pen/qBZRaVX?editors=0100

How do I get the following code to work on a Safari browser?

This code works on Chrome but does not work on Safari. The circle markers on the map are supposed to open up.
html {
background: #eaeaea;
color: #e5e5e5;
text-align: center;
font-family: "Open Sans", Helvetica, sans-serif;
}
body {
max-width: 1200px;
margin: 20px auto;
padding: 0 100px;
overflow-x: hidden;
}
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
div, img, footer {
position: relative;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
font-family: "Raleway", Helvetica, sans-serif;
font-weight: 300;
}
h1 {
font-size: 36pt;
}
h2 {
font-size: 24pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
}
strong {
font-weight: 900;
font-family: "Raleway", Helvetica, sans-serif;
color: #e5e5e5;
}
a {
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
font-family: "Raleway", Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #dff3fd;
}
a:visited {
color: #dff3fd;
}
li.active a, a:hover, a:active {
color: #e5e5e5;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centered-y {
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: #e69c53;
border: 4px solid #fff;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 300px;
height: 220px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
color: #afe1fa;
}
<link href='//fonts.googleapis.com/css?family=Raleway:300,400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:100,300,400,700,900' rel='stylesheet' type='text/css'>
<h1>Qualität die weltweit hörbar ist</h1>
<p class="description">This doesn’t look great at small sizes — in the original, I have an alternate rule for displaying on mobile devices. <strong>Click the points to expand them.</strong></p>
<div class="distribution-map">
<!-- This was broken for a while because imgur :( -->
<!-- I don't trust this host. Image here if it goes down: https://i.imgur.com/M7aUkuS.png -->
<img src="https://s24.postimg.org/jnd9wc0n9/M7a_Uku_S.png">
<!--In the original application, these points are injected with Javascript, but ideally, they'd be injected with a haml loop. Because I'm hardcoding content, I'm presenting this as prerendered HTML-->
<button class="map-point" style="top:15%;left:35%">
<div class="content">
<div class="centered-y">
<h2>Nordamerika</h2>
<p>You can put plenty of details in here. In the original, I listed contact information and linked phone numbers and email addresses.</p>
</div>
</div>
</button>
<button class="map-point" style="top:35%;left:50%">
<div class="content">
<div class="centered-y">
<h2>Another Place</h2>
<p>Lorem ipsum something something</p>
</div>
</div>
</button>
<button class="map-point" style="top:76%;left:82.5%">
<div class="content">
<div class="centered-y">
<h2>Marauder Town</h2>
<p>I solemnly swear that I am up to no good</p>
</div>
</div>
</button>
<button class="map-point" style="top:45%;left:16%">
<div class="content">
<div class="centered-y">
<h2>Nordamerika</h2>
<p>Englisch, Spanisch</p>
</div>
</div>
</button>
<button class="map-point" style="top:60%;left:53%">
<div class="content">
<div class="centered-y">
<h2>Toto</h2>
<p>I bless the rains</p>
</div>
</div>
</button>
<button class="map-point" style="top:45%;left:75%">
<div class="content">
<div class="centered-y">
<h2>Asiatisch</h2>
<p>Chinesische Sprecher</p>
</div>
</div>
</button>
</div>
<p class="description">It’s been brought to my attention that OSX/Safari doesn’t support :active for buttons with default settings, so you guys will have to resort to JS or hold down your mouse button to keep :focus triggered.</p>
I was wondering how to fix the codes so that they will work properly? I'm not sure if it needs javascript to work or not. Here is the original code I got this from if it helps:
https://codepen.io/tosa/pen/XjEOzJ?q=interactive+map&limit=all&type=type-pens

Replace the .map-point elements from button to a and add a tabindex attribute to each one.
Demo at https://codepen.io/gpetrioli/full/dZrgoM/

Touch (click) mobile device doesn't work

I have a problem close my drop down menu in mobile devices only. Is there a way how to remove classes i added before?
There is a Css hover for desktop and clickable for mobile devices.
Thank you for any answers.
$(document).ready(function(){
$('.drop_helper').on("click",function() {
$('.drop_nav').toggleClass('dropped');
$('.drop_helper').toggleClass('dropped_on').toggleClass('drop_down_btn');
});
});
li.drop_down_btn {
color:#a3a3a3;
}
li.drop_down_btn:after {
color:#a3a3a3;
font-family: 'FontAwesome';
content: "\f107";
font-size:16px;
padding-left: 9px;
}
li.drop_down_btn:hover {
cursor: pointer;
color:#1b2532;
}
li.drop_down_btn:hover:after {
font-family: 'FontAwesome';
content: "\f106";
color:#1b2532;
}
ul.drop_down {
position: relative;
display: inline-block;
list-style-type:none
}
ul.drop_nav {
list-style-type:none;
visibility: hidden;
opacity:0;
position: absolute;
text-align: left;
line-height: 26px;
/* background:url(bg_drop_down.png);*/
background-color:#FCFCFC;
padding:20px;
margin-left:-20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
khtml-border-radius: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.drop_nav li a {
display: block;
}
ul.drop_down:hover ul.drop_nav {
visibility: visible;
opacity:1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 2000
}
ul.dropped {
visibility: visible;
opacity:1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 2000;
}
.dropped_on:after {
color: #1b2532;
font-family: 'FontAwesome';
content: "\f106";
font-size: 16px;
padding-left: 9px;
}
.dropped_on:hover {
cursor:pointer
}
.drop_down:hover .drop_down_btn {
color: #1b2532;
}
.drop_down:hover .drop_down_btn:after {
color: #1b2532;
font-family: 'FontAwesome';
content: "\f106";
}
.drop_down .menu_btn a{
color: #a3a3a3;
}
.drop_down .menu_btn a:hover {
color: #1b2532;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drop_down">
<li class="drop_helper drop_down_btn">Category</li>
<ul class="drop_nav">
<li><a title="Food" href="/posts/food/">Food</a></li>
<li><a title="Fashion" href="/posts/fashion/">Fashion</a></li>
<li><a title="Entertainment" href="/posts/entertainment/">Entertainment</a></li>
</ul>
</ul>

Your question is a bit unclear but yes with a little bit of jQuery it's easy to remove a class, for example:
$('.drop_nav').removeClass('dropped');
Will remove the dropped class from elements with the drop_nav class.
EDIT
To also trigger on mobile touch events add the touchstart event to your jQuery.on like so:
$('.drop_helper').on('click touchstart'), function() {
...

Creating a vertical list of text that changes order on click

I am trying to modify the example found here:
div {
width: 200px;
margin: 30px;
}
h2 {
font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}
li:last-child {
border: none;
}
li a {
text-decoration: none;
color: #000;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
display: block;
width: 200px;
}
li a:hover {
font-size: 30px;
background: #f6f6f6;
}
<div>
<ul>
<li>Zurich</li>
<li>Geneva</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
So that:
The middle item in the list is already expanded at start
OnClick of any other elements the list shifts and the clicked item will move to the middle and be expanded
The opacity of the first and last elements of the list are decreased
Is this accomplishable in javascript or CSS? I have been reading about nth-child but I am trying to understand how to actually implement it. I understand nth-child can help me with the opacity case but is the only way to reorder the list (and animate the reordering eventually) possible with javascript? Or is CSS animations the way to go?

animate between css states?

Can I animate between hover states?
Eg:
#menu ul li a {
display:block;
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 5px;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
border-bottom: 25px solid #0488C5;
So the bottom border would rise up from 0 to 25px.
I'm not sure if this is possible with CSS, or if I'd have to use jQuery?

You can use CSS3 transitions, but their support isn't that great at the moment:
#menu ul li a {
-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;
}
The syntax is: element time easing
Here's a Fiddle

Yep, just add a CSS transition.
in #menu ul li a {
just add:
-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;
You don't need an ms one by the way, IE10 doesn't use prefixes.
For loads more info, have a look at http://css3.bradshawenterprises.com/

You can do animations between css classes using jQuery UI
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
You can also use it to animate css properties:
$( "#effect" ).animate({
backgroundColor: "#aa0000",
color: "#fff",
width: 500
}, 1000 );
This will animate from the current background color, color and width, to the ones you specify.

CSS3 transitions would do the job:
#menu ul li a {
display:block;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin: 0 5px;
padding: 0 10px;
-webkit-transition: border-bottom-width 0.5s ease-in-out;
-moz-transition: border-bottom-width 0.5s ease-in-out;
-o-transition: border-bottom-width 0.5s ease-in-out;
transition: border-bottom-width 0.5s ease-in-out;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
border-bottom: 25px solid #0488C5;
}