Develop Reference

JQuery show/hide and collapse if click outside

I've started playing around with JQuery in the last week, and I'm needing some help understanding what I am doing incorrectly. I'm sure this is very simple, but please be patient as I am learning.
End result: When you click "Open Menu" - then the notification menu opens. If you click outside of the ul class ".profiledrop" then the notification menu closes.
// Tab collapser //
$('.notification-tab').click(function(e) {
if ($(e.currentTarget).parent().hasClass('active')) {
$('.notification-group').removeClass('active');
} else {
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").show();
});
/* Notification Infastructure */
.profiledrop {
display: none;
width: 350px;
height: auto;
max-height: 600px;
padding: 0;
margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
}
.notification-group {
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;
}
.notification-list {
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;
}
.notification-list-item {
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3
}
.notification-list-item:nth-child(even) {
background-color: #E3E3E3
}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px;
height: 60px;
object-fit: cover
}
/* Misc Settings */
.message::not(.nopic) {
margin-top: 0px;
margin-left: 80px
}
/* Style for notification groups without image */
/* Notification text styling */
.label {
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;
}
h4 {
margin-left: 10px
}
h4,
.label {
display: inline-block;
}
.message {
margin-top: 0px
}
.date {
float: right;
color: darkgray
}
/* Active Section */
.active .notification-list {
height: 250px;
}
.active .notification-tab,
.notification-tab:hover {
background-color: #5B7042
}
.active .label,
.notification-tab:hover .label {
border: 1px solid white
}
.notification-tab:hover {
color: white
}
.active .label,
.active h4 {
color: white
}
/* Responsive design */
#media only screen and (max-width: 514px) {
body {
margin: 0px
}
.profiledrop {
width: 100%;
margin: 0px;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">
<div class="dropdown-container">
<a href="#" id='launch'>Open Menu</a>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>

When you click on menu you need to exclude it from you logic of closing the menu.
So create another if if (e.target.id != "launch") { and wrap your closing menu logic in it. You where opening with one event and closing in same time with another:
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
I would also suggest to use .toggle(); here so you can open and close menu by clicking the button:
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").toggle();
});
EXAMPLE:
// Tab collapser //
$('.notification-tab').click(function(e) {
if ($(e.currentTarget).parent().hasClass('active')) {
$('.notification-group').removeClass('active');
} else {
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").toggle();
});
/* Notification Infastructure */
.profiledrop {
display: none;
width: 350px;
height: auto;
max-height: 600px;
padding: 0;
margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
}
.notification-group {
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;
}
.notification-list {
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;
}
.notification-list-item {
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3
}
.notification-list-item:nth-child(even) {
background-color: #E3E3E3
}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px;
height: 60px;
object-fit: cover
}
/* Misc Settings */
.message::not(.nopic) {
margin-top: 0px;
margin-left: 80px
}
/* Style for notification groups without image */
/* Notification text styling */
.label {
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;
}
h4 {
margin-left: 10px
}
h4,
.label {
display: inline-block;
}
.message {
margin-top: 0px
}
.date {
float: right;
color: darkgray
}
/* Active Section */
.active .notification-list {
height: 250px;
}
.active .notification-tab,
.notification-tab:hover {
background-color: #5B7042
}
.active .label,
.notification-tab:hover .label {
border: 1px solid white
}
.notification-tab:hover {
color: white
}
.active .label,
.active h4 {
color: white
}
/* Responsive design */
#media only screen and (max-width: 514px) {
body {
margin: 0px
}
.profiledrop {
width: 100%;
margin: 0px;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
<a href="#" id='launch'>Open Menu</a>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>

How to display a multilevel dropdown using classes of carbon design system?

I want to implement a dropdown menu where hovering over a particular option from the menu opens another set of options, something like this (hovering over Option 3 opens up menu containing Option 4 and 5) -
I have been trying similar thing using carbon classes (taken reference from - https://the-carbon-components.netlify.app/?nav=dropdown and https://codepen.io/team/carbon/pen/wEGEoz) but I am not able to achieve it.
This is what my code looks like -
HTML -
<ul data-dropdown data-value class="bx--dropdown" tabindex="0">
<li class="bx--dropdown-text">Choose an option</li>
<li>
<ul class="bx--dropdown-list">
<li data-option data-value="Option 1" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a></li>
<li data-option data-value="Option 2" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a></li>
<li data-option data-value="Option 3" class="bx--dropdown-item" id="openMenu"><a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
<ul class="bx--dropdown-list" id="customMenu" style="display:none;margin-left:75px;">
<li data-option data-value="Option 4" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a></li>
<li data-option data-value="Option 5" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS -
.bx--dropdown {
outline: 2px solid transparent;
outline-offset: -2px;
position: relative;
list-style: none;
display: block;
background-color: white;
border: none;
border-bottom: 1px solid #8C8c8c;
width: 100%;
height: 2.5rem;
cursor: pointer;
color: #171717;
outline: 2px solid transparent;
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.bx--dropdown-text {
display: block;
padding-left: 1rem;
padding-right: 2.625rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.125rem;
letter-spacing: 0.16px;
}
.bx--dropdown-list {
background-color: white;
display: flex;
flex-direction: column;
outline: 2px solid transparent;
outline-offset: -2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.125rem;
letter-spacing: 0.16px;
width: 100%;
list-style: none;
position: absolute;
z-index: 1000;
max-height: 0;
transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
overflow-x: auto;
overflow-y: auto;
}
.bx--dropdown-item {
transition: visibility 70ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity
70ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms
cubic-bezier(0.2, 0, 0.38, 0.9);
opacity: 0;
visibility: inherit;
position: relative;
}
.bx--dropdown-link {
display: block;
outline: 2px solid transparent;
outline-offset: -2px;
height: 2.5rem;
color: #393939;
text-decoration: none;
font-weight: normal;
line-height: 1rem;
padding: 0.6875rem 0;
margin: 0 1rem;
border: 1px solid transparent;
border-top-color: #e0e0e0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.bx--dropdown--open .bx--dropdown-list {
max-height: 15rem;
transition: max-height 110ms cubic-bezier(0, 0, 0.38, 0.9);
}
.bx--dropdown--open .bx--dropdown-item {
opacity: 1;
}
Here .bx--dropdown--open class gets added to ul containing class bx--dropdwon after clicking on 'Choose an option' box, like -
<ul data-dropdown="" data-value="" class="bx--dropdown bx--dropdown--open" tabindex="0">
JS -
$("#openMenu").on("mouseover",function() {showNew();});
$("#openMenu").on("mouseout",function() {showOld();});
function showNew(evt) {
$("#customMenu").attr("style", "display:block;margin-left:75px;");
}
function showOld() {
$("#customMenu").attr("style", "display:none");
}
The problem is that on hovering over Option 3 a scrollbar appears within the dropdown menu and the options Option 4 and Option 5 show within the initial dropdown only -
I want it to appear out of that box in the same way as it is in the first example that I have given. I am unable to understand how to make it work even after spending a lot of time with it. Any help is appreciated.

I don't think you can make it with the sole use of carbon.
I combined carbon and bootstrap to achieve a top-nav with multi level dropdown sub-items.
https://the-carbon-components.netlify.app/component/ui-shell--default.html
https://bootstrap-menu.com/demos/multilevel.html
.dropdown-menu li {
position: relative;
}
.nav-item .submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
padding-top: 7px;
}
.dropdown-menu>li:hover>.submenu {
display: block;
}
.dropdown-item {
background-color: #262626;
}
<link href="https://unpkg.com/carbon-components/css/carbon-components.min.css" rel="stylesheet" />
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
<header class="bx--header">
<nav class="bx--header__nav" aria-label="Platform Name" data-header-nav>
<ul class="bx--header__menu-bar" aria-label="Platform Name">
<li class="bx--header__submenu" data-header-submenu>
<a class="bx--header__menu-item bx--header__menu-title" aria-haspopup="true" aria-expanded="false" tabindex="0"><strong> Main </strong>
<svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
</svg>
</a>
<ul class="bx--header__menu navbar-nav" aria-label="Sub1">
<li class="nav-item dropdown">
<ul class="dropdown-menu">
<li>
<a class="bx--header__menu-item bx--header__menu-title dropdown-item" aria-haspopup="true" aria-expanded="false" tabindex="0" href="#">
<strong> Dropdown 1 </strong>   >
</a>
<ul class="submenu">
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub1" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 1 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub2" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 2 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub3" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 3 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<ul class="dropdown-menu">
<li>
<a class="bx--header__menu-item bx--header__menu-title dropdown-item" aria-haspopup="true" aria-expanded="false" tabindex="0" href="#">
<strong> Dropdown 2 </strong>   >
</a>
<ul class="submenu">
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub4" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 4 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub5" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 5 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li role="none">
<a class="bx--header__menu-item" href="/drop3" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Dropdown 3 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item" href="/drop4" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Dropdown 4 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>

Responsiveness of a div

I'm trying to make the div section responsive for smaller devices but it is not working. its just staying the same size, as desktop size. What do I do?
<div class="accordian">
<ul>
<li >
<div class="image_title">
Hello My Name is Opport
</div>
<a href="" class="" data-toggle="modal" data-target="#v1">
<img src="images/ss.jpg">
</a>
</li>
<li>
<div class="image_title">
Title
</div>
<a href="#"class="" data-toggle="modal" data-target="#2">
<img src="images/H1pGIHzZ4.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#3">
<img src="images/SynAHSM-4.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#4">
<img src="images/SJESNHGW4.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#5">
<img src="images/ss.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#6">
<img src="images/SynAHSM-4.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#v7">
<img src="images/SynAHSM-4.jpg"/>
</a>
</li>
</ul>
</div>
i tried media queries but don't know what i'm doing wrong
.accordian {
width: auto;
height: auto;
overflow: hidden;
margin: 100px auto;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
width: 1200px;
}
.accordian li {
position: relative;
display: block;
width: 160px;
float: left;
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordian ul:hover li {
width: 40px;
}
.accordian ul li:hover {
width: 840px;
}
.accordian li img {
display: block;
height: 100%;
max-width: inherit;
}
/*Image title styles*/
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
width: 640px;
}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
font-size: 16px;
}
above is the css of the div
I expect it to provide touch slide on mobile devices and fit to screen

Set width as follow in the css, so it will be not fixed
.accordian ul {
max-width: 1200px;
}
.accordian li {
max-width: 160px;

Before your accordian you must add new div called container or what ever,
than in CSS most add media to match devices screen sizes
the code will be ( with your code ) :
<div class="container"> <!-- start container class -->
<div class="accordian">
<ul>
<li >
<div class="image_title">
Hello My Name is Opport
</div>
<a href="" class="" data-toggle="modal" data-target="#v1">
<img src="images/ss.jpg">
</a>
</li>
<li>
<div class="image_title">
Title
</div>
<a href="#"class="" data-toggle="modal" data-target="#2">
<img src="images/H1pGIHzZ4.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#3">
<img src="images/SynAHSM-4.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#4">
<img src="images/SJESNHGW4.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#5">
<img src="images/ss.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#6">
<img src="images/SynAHSM-4.jpg"/>
</a>
</li>
<li>
<div class="image_title">
title
</div>
<a href="#"class="" data-toggle="modal" data-target="#v7">
<img src="images/SynAHSM-4.jpg"/>
</a>
</li>
</ul>
</div>
</div> <!-- end container class -->
and for the css add
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 1200px)
.container {
max-width: 1140px;
}
#media (min-width: 992px)
.container {
max-width: 960px;
}
#media (min-width: 768px)
.container {
max-width: 720px;
}
#media (min-width: 576px)
.container {
max-width: 540px;
}
Extra :) if you would like to add effect on your page via container, add thou's lines
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
transition: .5s;
}
Regarding.

Change background colour of an active div

I have created a drop down menu.I wanna change the background color of active span tag, which contains the arrow image. And on click of any dropdown option, it should close and that option should come in the menu.
example:- if i click on option 'DROP ITEM 2' option , it should replace the 'ITEM NAME'.
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
ITEM name <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

place the text "item name " in a span with an id named label1
and add the following
e(".dropdown_menu").click(function(event){
e("#label1").text(event.target.textContent.trim());
})
Snippet below
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
});
e(".dropdown_menu").click(function(event) {
e("#label1").text(event.target.textContent.trim());
console.log(this);
})
e(".table-cell-data").click(function(ev){
var that=this;
e(".table-cell-data").each(function(){
if(this.classList.contains("color_me") && this!=that){
this.classList.remove("color_me");
}
})
this.classList.add("color_me")
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.color_me{
background:green;
color:white;
}
#rotate_sign{
background:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
<span id="label1"> ITEM name <span><span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

Codecademy flipboard code not working on my computer

I went through the Codecademy flipboard tutorial which basically just shows you how to put a .js file together for a carousel. I took the code from the website and created files on my computer.
I'm saving them as separate files on my computer in one folder. I've tried both pointing the file to a js file I downloaded from the js website (that I placed in the same folder) AND I tried using the website Codecademy provided as the source so I don't think that's the issue. I have each of the files saved separately as app.js, index.html, and style.css.
When I run it, it looks as it should but the the carousel isn't working. However, if I run it on Codecademy it runs perfectly. What gives? I'm just trying to understand the carousel fully and the interaction between .js .html and .css I'm also trying to build my own resume type website with a carousel but I can't do that until I fully understand each of these parts. Something Codecademy fails to do in my eyes.
app.js
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
index.html
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App
</li>
<li>Tutorials
</li>
<li>Magazines
</li>
<li>Web Tools
</li>
<li>Support
</li>
<li>Careers
</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community
</li>
<li>Our Blog
</li>
<li>Maps Blog
</li>
<li>Eng Blog
</li>
<li>Advertisers
</li>
<li>Publishers
</li>
<li>About Us
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png" width="540px">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
</a>
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared
and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png" width="540px">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>
style.css
/* General */
.container {
width: 960px;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 9px;
padding-left: 0px;
padding-top: 9px;
}
.get-app li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.get-app img {
height: 40px;
}
Snippet:
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
/* General */
.container {
width: 960px;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 9px;
padding-left: 0px;
padding-top: 9px;
}
.get-app li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.get-app img {
height: 40px;
}
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App
</li>
<li>Tutorials
</li>
<li>Magazines
</li>
<li>Web Tools
</li>
<li>Support
</li>
<li>Careers
</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community
</li>
<li>Our Blog
</li>
<li>Maps Blog
</li>
<li>Eng Blog
</li>
<li>Advertisers
</li>
<li>Publishers
</li>
<li>About Us
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png" width="540px">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
</a>
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared
and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png" width="540px">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>

There are a few things missing in your code.
Adding this:
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(500).addClass('active-slide');
below your if statement in your click event handler for arrow-next will do the trick.
See this fiddle: https://jsfiddle.net/6nbo8htt/