I have to set up a menu website for an assignment and want to make a floating side div for the order summary
Figma reference : https://images2.imgbox.com/59/9f/qikiR5qq_o.jpg
Note: This is the first class with any coding so I'm really new to this.
I have the div and grid set up but can't add the content without messing things up.
The buttons at the bottom are always either not at the bottom or too bottom that it passes the div. Is the problem the div or the content?
Is there a way to remove the item using the remove button? I guess that's javascript?
I copied the code here: https://jsfiddle.net/93bqypdu/1/
<div class="grid-container">
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
</div>
<div class="side">
<img src="https://images2.imgbox.com/f6/96/uf0fayVE_o.png" width="150vh"
height="auto" class="pic">
<div class="content">Lorem Ipsum</div>
<div class="sbutt">
CANCEL
</div>
<div class="sbutt">
ORDER
</div>
</div>
If you are referring to the misaligned Order & Cancel buttons in your fiddle, we will need to add an additional div container for the buttons and assign additional classes to the buttons:
HTML
<div class="grid-container">
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
</div>
<div class="side">
<img src="https://images2.imgbox.com/f6/96/uf0fayVE_o.png" width_="150vh" height="auto" class="pic">
<div class="content">Lorem Ipsum</div>
<div class="sbutt-container">
<div class="sbutt cancel" onclick="window.location.href = 'Hiveworks.html';">
CANCEL
</div>
<div class="sbutt order" onclick="window.open('dashboard.html', '_blank', 'toolbar=no,scrollbars=no,resizable=no,top=100,left=800,width=380,height=380',overflow=hidden)">
ORDER
</div>
</div>
</div>
CSS
.side {
right: 1px;
float: right;
margin: 0;
margin-right: 1%;
width: 26vw;
height: 80%;
background-color: #ffffff;
border-radius: 10px;
border: 5px solid #EFA078;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
position: fixed;
padding: 0;
}
.content {
height: 51%;
background-color: #ffffff;
}
.pic {
margin-left: 20px;
margin-right: 20px;
max-width: 100%;
}
.sbutt-container {
position: absolute;
display: block;
height: auto;
bottom: 0;
width: 100%;
background-color: white;
height: auto;
padding: 10px;
box-sizing: border-box;
}
.sbutt {
background-color: #EFA078;
display: block;
text-align: center;
font-size: 10px;
vertical-align: middle;
padding: 5px 5px;
}
.cancel {
width: 30%;
float: left;
left: 0;
}
.order {
width: 50%;
float: right;
right: 0;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 1px;
grid-row-gap: 2px;
padding: 0;
width: 69vw;
height: 100%;
margin-left: 0.8%;
float: left;
}
.a {
margin: 0;
width: 150px;
height: 150px;
background-color: red;
}
Watch it in action: https://jsfiddle.net/q4n9rxhg/
Related
I'm having a small issue getting a toggle to work in a particle way, for all I know it can't be done using a toggle which is why I'm writing on here to see if someone can show me the best method. So at the moment I have 3 divs all of which have onclick events, and each have a toggle css class. What I'm trying to achieve is when one is clicked if the others are active they return back to the previous class.
function orgClick(clicked_id) {
var id = (clicked_id);
document.getElementById(id).classList.toggle('org_container_active');
}
.org_container {
width: 20%;
margin-left: 6.25%;
margin-right: 6.25%;
margin-top: 15px;
border: 2px solid #e1dfe1;
border-radius: 15px;
display: inline-block;
}
.org_container_active {
width: 20%;
margin-left: 6.25%;
margin-right: 6.25%;
margin-top: 15px;
border: 2px solid #2bbe43;
border-radius: 15px;
display: inline-block;
}
.org_name {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
.org_logo {
padding-top: 10px;
margin: auto;
width: 100px;
}
.org_info {
padding: 5px 10px 10px 5px;
}
<div class="org_container" id="org1" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 1</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">
</div>
<div class="org_info">
<p></p>
</div>
</div>
<div class="org_container" id="org2" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 2</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">
</div>
<div class="org_info">
<p></p>
</div>
</div>
<div class="org_container" id="org3" onclick="orgClick(this.id);">
<div class="org_name">
<p align="center">Org 3</p>
</div>
<div class="org_logo">
<img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" class="noselect">
</div>
<div class="org_info">
<p></p>
</div>
</div>
document.querySelectorAll() lets you search for all elements that match a CSS selector. You can use it to deactivate all active containers:
for (let div of document.querySelectorAll('.org_container_active')) {
div.classList.remove('org_container_active');
}
In the snippet provided, I have 3 sections: The first contains a single image, the second has two images, and the last one has no images.
I would like for the .image class within the first section to be 100% in width only if there is no other .image div present.
However, once there is another .image div present, (as shown in the second section), I would like it to default back to 50% width.
How should I execute this?
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
overflow: auto;
}
.image {
float: left;
display: block;
width: 50%;
line-height: 0;
}
.image img {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>
You could display the section as a table and the div.image as a table-cell. Then the image would resize according to the number of "cell's" (div.image's) present.
div.container{
display: 100%;
}
div.section{
width: 100%;
display: table;
}
div.section div.image{
display: table-cell;
}
div.section div.image img{
width: 100%;
height: auto;
}
Here's a JSFiddle:
https://jsfiddle.net/ColiniloC/Lnnkpx6L/
Figured out a simpler solution with flexbox:
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
.section {
display: flex;
flex-wrap: wrap;
overflow: hidden;
align-items: center;
margin: 0 -5px;
}
.image {
flex: 1 1 50%;
line-height: 0;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.container .image:nth-of-type(n+3) {
padding-top: 10px;
}
.image img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
</div>
</div>
<!-- 4 Images -->
<div class="container">
<h1>Section With 4 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/burger-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>
I'm trying to create a material design Stepper using Materializecss and I'm almost there, but I'm having some strange issue with the slideUp animation on each step.
When it's just about to end, there is an abrupt jump. I prepared a jsFiddle for you to see, but I'm also writing the code in here:
https://jsfiddle.net/c3xLwzru/
HTML:
<div class="row">
<div class="col l8 m10 s12 offset-l2 offset-m1">
<h3 class="light center-align purple-text text-darken-4">Subscription</h3>
<div class="card">
<div class="card-content">
<ul class="stepper">
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div>
<div class="step-content">
Example 1
<div class="step-actions">
<button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div>
<div class="step-content">
Example 2
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div>
<div class="step-content">
Example 3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS (adding to Materializecss):
ul.stepper {
max-width: 800px;
}
.step:not(:last-child) {
position: relative;
margin-bottom: 24px;
}
.step:not(:last-child).active {
margin-bottom: 36px;
}
.step-title {
margin: 0 -20px;
cursor: pointer;
margin-bottom: 8px;
padding: 12px 44px 24px 20px;
display: block;
}
.step-title:hover {
background-color: #F0F0F0;
}
.step.active .step-title {
font-weight: 500;
}
.step-title .number {
margin-right: 10px;
display: inline-block;
height: 28px;
width: 28px;
color: white;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: 400;
}
.step.active .number {
background-color: #9C27B0;
}
.step-content {
display: none;
height: calc(100% - 132px);
width: inherit;
overflow: auto;
margin-left: 41px;
margin-right: 24px;
}
.stepper>.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
left: 13.5px;
width: 1px;
height: calc(100% - 24px);
background-color: rgba(0,0,0,0.1);
}
.stepper>.step.active:not(:last-child)::after {
height: calc(100% - 12px);
}
.step-actions {
display: none;
padding-top: 16px;
margin-right: 24px;
}
.step.active .step-actions {
display: block;
}
And JS, using jQuery:
$(document).on("click", '.stepper .step-title:not(.active)', function () {
$(this).parent().addClass('active');
$(this).next().stop().slideDown('slow');
$(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow');
$(".step.active").not($(this).parent()).removeClass('active');
});
I don't know what to do anymore. I tried everything and I couldn't find a reason for them to jump, man.
Could you help me?
Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content.
It should stop abrupt jump
I've searched the web, found and later edited a good example of family tree here in codepen: http://codepen.io/anon/pen/bdLeNe. My code is below.
I am struggling with 2 (css) issues:
1: I need to adapt the tree so in every parent link's end (where it intersects its children level) I can paint a circle, but the only thing I get is it paints the circle below the link.
Something like this:
----- LN
|
P --- O
|
----- LN
Where P is Parent and LN leaf node.
2: In the original example leaf nodes have no content (p, inputs, and so on). If they have it inside any of these elements <span class="label">, they overlap with its brothers. I do not know how to make them have variable height when they are relative positioned. I have tried with margin-top but then the problems is that the links are not high enough (nodes are disconnected)
I created a gist: https://gist.github.com/leolanchas/9887b4e68db9f5894c9c
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
min-width: 1200px;
margin: 0;
padding: 50px;
color: #eee9dc;
font: 16px Verdana, sans-serif;
background: #2e6ba7;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#wrapper {
position: relative;
}
.branch {
position: relative;
margin-left: 250px;
}
.branch:before {
content: '';
font-size: 40px;
width: 50px;
border-top: 2px solid #eee9dc;
position: absolute;
left: -100px;
top: 50%;
margin-top: 1px;
}
.branch:after {
content: '\25CF';
font-size: 40px;
position: absolute;
left: -100px;
top: 50%;
}
.entry {
position: relative;
min-height: 60px;
}
.entry:before {
content: "";
height: 100%;
border-left: 2px solid #eee9dc;
position: absolute;
left: -50px;
}
.entry:after {
content: "";
width: 50px;
border-top: 2px solid #eee9dc;
position: absolute;
left: -50px;
top: 50%;
margin-top: 1px;
}
.entry:first-child:before {
width: 10px;
height: 50%;
top: 50%;
margin-top: 2px;
border-radius: 10px 0 0 0;
}
.entry:first-child:after {
height: 10px;
border-radius: 10px 0 0 0;
}
.entry:last-child:before {
width: 10px;
height: 50%;
border-radius: 0 0 0 10px;
}
.entry:last-child:after {
height: 10px;
border-top: none;
border-bottom: 2px solid #eee9dc;
border-radius: 0 0 0 10px;
margin-top: -9px;
}
.entry.sole:before {
display: none;
}
.entry.sole:after {
width: 50px;
height: 0;
margin-top: 1px;
border-radius: 0;
}
.label {
display: block;
min-width: 150px;
padding: 5px 10px;
line-height: 20px;
text-align: center;
border: 2px solid #eee9dc;
border-radius: 5px;
position: absolute;
left: 0;
top: 50%;
margin-top: -15px;
}
.label input {
display: block;
}
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<div id="wrapper">
<span class="label">Root</span>
<div class="branch lv1">
<div class="entry"><span class="label">Entry-1</span>
<div class="branch lv2">
<div class="entry"><span class="label">Entry-1-1</span>
<div class="branch lv3">
<div class="entry sole"><span class="label">Entry-1-1-1</span></div>
</div>
</div>
<div class="entry"><span class="label">Entry-1-2</span>
<div class="branch lv3">
<div class="entry sole"><span class="label">Entry-1-2-1</span></div>
</div>
</div>
<div class="entry"><span class="label">Entry-1-3</span>
<div class="branch lv3">
<div class="entry sole"><span class="label">Entry-1-3-1</span></div>
</div>
</div>
</div>
</div>
<div class="entry"><span class="label">Entry-2</span></div>
<div class="entry"><span class="label">Entry-3</span>
<div class="branch lv2">
<div class="entry"><span class="label">Entry-3-1</span></div>
<div class="entry"><span class="label">Entry-3-2</span></div>
<div class="entry"><span class="label">Entry-3-3</span>
<div class="branch lv3">
<div class="entry"><span class="label">Entry-3-3-1</span>
<div class="branch lv3">
<div class="entry">
<span class="label">
<input type="text" disabled="" value="Entry-3-3-1-1">
<input type="text" disabled="" value="Entry-3-3-1-1">
<input type="number"></input>
</span>
</div>
<div class="entry"><span class="label">Entry-3-3-1-2</span></div>
<div class="entry"><span class="label">Entry-3-3-1-3</span></div>
<div class="entry"><span class="label">Entry-3-3-1-4</span></div>
<div class="entry"><span class="label">Entry-3-3-1-5</span></div>
<div class="entry"><span class="label">Entry-3-3-1-6</span></div>
</div>
</div>
<div class="entry"><span class="label">Entry-3-3-2</span>
<div class="branch lv4">
<div class="entry"><span class="label">Entry-3-3-2-1</span></div>
<div class="entry"><span class="label">Entry-3-3-2-2</span></div>
<div class="entry"><span class="label">Entry-3-3-2-3</span></div>
<div class="entry"><span class="label">Entry-3-3-2-4</span></div>
<div class="entry"><span class="label">Entry-3-3-2-5</span></div>
<div class="entry"><span class="label">Entry-3-3-2-6</span></div>
</div>
</div>
<div class="entry"><span class="label">Entry-3-3-3</span></div>
</div>
</div>
<div class="entry"><span class="label">Entry-3-4</span></div>
</div>
</div>
<div class="entry"><span class="label">Entry-4</span></div>
<div class="entry"><span class="label">Entry-5</span></div>
</div>
I am bulding a mobile responsive web page that looks like the "Play Market" from Android.
I have a list of divs which have a button inside them.
Each button opens a div with unique links.
how do I create something like this in an efficient way without positioning every div differently?
This is my JSfiddle: http://jsfiddle.net/e0byofe2/
I tried using the position: relative; property to the menu - it made a mess with the elements within the div.
I tried using position: absolute; which is ok, but I can't position the menu over each single div in a global way.
HTML:
<div class="main">
<div id="header-wrap">
<div id="header" class="clear">
<img src="arrow.jpg" />
<img src="search.jpg" style="float: right;" />
</div>
</div>
<div class="content">
<div id="apps-header">Apps</div>
<div class="line"></div>
<div class="apps">
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
<div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">
</div>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
</div>
</div>
</div>
CSS:
body{
margin: 0;
height: 100%;
}
.main{
overflow-x: hidden;
width: 100%;
height: 100%;
}
#header-wrap {
width: 100%;
position: fixed;
background-color: #689f38;
height: 62px;
}
#header {
width: 100%;
position: absolute;
bottom: 0;
box-shadow: 0px 0px 19px rgb(10, 29, 90);
-webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
-moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}
.content{
padding-top: 80px;
width: 100%;
/*height: 100%;*/
background-color: #eeeeee;
}
#apps-header{
margin-left: 10px;
font-family: arial;
background-image: url('triangle.png');
background-position: bottom;
width: 86px;
background-repeat: no-repeat;
background-size: 10px;
}
.line{
width: 100%;
height: 2px;
background-color: #458b09;
margin-top: 10px;
}
.apps{
width: 100%;
/*border: 1px solid black;*/
padding-top: 10px;
height: 100%;
}
.app{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgb(145, 145, 145);
-webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
-moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
background-color: #fafafa;
padding: 10px 8px;
margin: 5px 8px;
display: inline-table; /******/
}
.app_icon{
width: 83px;
height: 83px;
float: left;
}
.app_info{
/*border: 1px solid red;*/
float: left;
width: 210px;
height: 81px;
padding-left: 20px;
}
.app_name{
font-family: arial;
font-size: 18px;
}
.app_comp{
font-family: arial;
font-size: 16px;
color: #595959;
}
.stars img{
float: left;
width: 14px;
height: 14px;
}
.free{
color: #69a03a;
font-family: arial;
position: relative;
bottom: -25px;
left: 105px;
font-size: 14px;
}
.3dots{
height: 25px;
}
The best example I can give you is when you open the "Play Market" on your Android and search for a random app, you get a bunch of app div results. When clicking the 3 dots on the top-right corner - it opens a list with 2 items over the specific apps div.
It should look like this:
When you choose an other app and press the 3 dots in the corner, you get the same list with 2 option, but over the apps div.
I've changed your structure little bit and made the 'dots' image as a button of the menu with jquery
HTML:
<img src="3dots.png" class="dots"/>
<div class="dots_menu">
link 1
link 2
</div>
CSS:
.app
{
position: relative;
}
.dots
{
float: right;
}
.dots_menu
{
display: none;
width: 202px;
position: absolute;
top: 35px;
right: 0;
z-index: 1;
background: rgb(238, 238, 238);
-webkit-box-shadow: 0px 4px 15px #000;
-moz-box-shadow: 0px 4px 15px #000;
box-shadow: 0px 4px 15px #000;
}
.dots_menu.show
{
display: block;
}
.dots_menu a
{
display: block;
text-decoration: none;
color: #000;
padding: 10px;
}
JQuery:
$(document).ready(function(){
$('.dots').click(function(){
$('.dots_menu').removeClass('show');
$(this).next().addClass('show');
});
});
example: http://jsfiddle.net/e0byofe2/3/
is that what you are looking for?