We Keep Coding

jQuery: "data-target" toggle function – show only one content area

In general, my code (below) works. But: If you click at first "Link 1", and then for example "Link 2", only the content for Link 2 should be visible.
How is it possible to code that?
$("li").click(function() {
$($(this).data("target")).toggle();
// hide all other content areas
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
Would be very thankful for help! <3

If you're looking to keep the ability to toggle the one you clicked, you can use
var target = $($(this).data("target"));
$(".content").not(target);
target.toggle();
to find all the content divs except the target one.
If you just want to show the clicked one then you can hide all the others, (as provided in the other answer).
Updated snippet:
$("li").click(function() {
var target = $($(this).data("target"));
$(".content").not(target).hide();
target.toggle();
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>

You're targetting a single <div> each time... there's nothing in your code to "reset" the other ones.
Try this, which first hides all the <div> elements, and then shows your selected one...
$("li").click(function() {
$(".content").hide();
$($(this).data("target")).show();
})
$("li").click(function() {
$(".content").hide();
$($(this).data("target")).show();
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
Note, if you need the content to disappear if you click the <li> a second time, this will not work, as it will always show the item you've clicked.
If you need it to disappear, see the answer by freedomn-m

Stack inner anchor tag on top of nav

I have an anchor tag with a hamburger style css that toggles a fly-out menu. The thing I am stuck at is that I always want it to stay on top however at present the flyout menu goes over the anchor hamburger and hides it. The flyout menu has the class called nav-container any help is welcome here as I have tried to solve this for a few hours. Thanks in advance.
HTML -
<div class="container">
<nav id="main-nav" class="hc-nav hc-nav-1">
<ul>
<li class="Test page">
Test page
<ul>
<li class="nav-has-sub">
Sub test page
<ul>
<li>
Sub sub test page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<a class="toggle">
<span></span>
</a>
</div>
Flyout HTML -
<div class="nav-container" style="">
<div class="nav-wrapper nav-wrapper-0">
<div class="nav-content">
<ul>
<li class="nav-close"><span></span></li>
<li><a class="toggle toggle-open hc-nav-trigger hc-nav-1 nav-item" style="top:-25px;left:10px">
<span></span>
</a>
</li>
</ul>
<ul>
<li class="Test page nav-parent">
<input type="checkbox" id="hc-nav-1-1-0" data-level="1" data-index="0" value="n83m4ogohw-gjximxnm4rq">Test page<span class="nav-next"><label for="hc-nav-1-1-0"></label></span>
<div class="nav-wrapper nav-wrapper-1">
<div class="nav-content">
<h2>Test page</h2>
<ul style="text-indent: 40px;">
<li class="nav-has-sub nav-parent">
<input type="checkbox" id="hc-nav-1-2-0" data-level="2" data-index="0" value="vjoqryeoc9-trdi4kvf59">level 2.1<span class="nav-next"><label for="hc-nav-1-2-0"></label></span>
<div class="nav-wrapper nav-wrapper-2">
<div class="nav-content">
<h2>level 2.1</h2>
<ul style="text-indent: 80px;">
<li>level 3</li>
</ul>
</div>
</div>
</li>
<li>level 2.2</li>
</ul>
</div>
</div>
</li>
</ul>
<ul>
<li class="Another top level">Another top level</li>
</ul>
</div>
</div>
</div>
CSS
.toggle
{
position: absolute;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
top: 20px;
z-index: 9980;
width: 35px;
min-height: 24px;
width: auto;
left: auto;
float: left;
display: block;
cursor: pointer;
box-sizing: content-box;
font-size: 20px;
padding-left: 55px;
line-height: 24px;
margin-top: 0
}
.nav-container {
position: fixed;
z-index: 9998;
top: 0;
width: 350px;
height: auto;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
transition: transform .4s ease;
padding-bottom: 450px;
}

It was a very simple case of giving the class .nav-container a z-index:0
Thanks everyone for posting.

ordering images horizontally but not on the same level

I have the following div:
<div id="features">
<div class="wrapper">
<ul>
<li class="feature-1"><img src="img/black/blackMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-2"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-3"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-4"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-5"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></li>
<div class="clear"></div>
</ul>
</div>
and I want that the images will be at the same size but be in different levels
I cant upload photo but I attaching a link for a page that is a very good example of what I mean to
http://www.wix.com/website-template/view/html/760?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F32&bookName=new-ecom&galleryDocIndex=0&category=all&metaSiteId=

This is one way to do it, if I got your question right.
.wrapper ul {
display: flex;
}
.wrapper ul li {
margin: 10px;
list-style: none;
}
.wrapper ul li:nth-child(odd) {
margin-top: 50px !important;
}
<div class="wrapper">
<ul>
<li class="feature-1"><img src="img/black/blackMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-2"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-3"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-4"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-5"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></li>
<div class="clear"></div>
</ul>
</div>

You could solve it like this:
.wrapper li {
float: left; /* Puts them on the same row. */
margin: 10px; /* Some space around them. */
list-style: none; /* Remove the bullet point. */
}
/* Individual top margins for the different list items. */
li.feature-1 { margin-top: 20px; }
li.feature-2 { margin-top: 40px; }
li.feature-3 { margin-top: 0px; }
/* ...and so on... */
You could also use the nth-child() pseudo-selector as suggested in other answers, but then it will not work in IE 8 and below (not a big problem, but still).

I've created something similar but without the images as I do not have them
https://jsfiddle.net/cjqzpb7p/
<div id="features">
<div class="wrapper">
<ul>
<li class="feature-1">Hi</li>
<li class="feature-2">Block</li>
<li class="feature-3">Blockz</li>
<li class="feature-4">Blocks</li>
<li class="feature-5">Blockx</li>
</ul>
</div>
</div>
#features li {
height: 400px;
background: red;
width: 180px;
display: block;
list-style-type: none;
float: left;
&:nth-child(2n+2) {
margin: 50px 20px 0 20px;
}
}
Markup CSS done in SASS

Able to Drag but not Drop: jQuery Plug-in

I am trying to implement the drop and drop feature in my app using a jQuery plugin as described here: http://farhadi.ir/projects/html5sortable/ anyhow, I am only able to drag the list objects and not drop them in my project.
Then, I tried to simply .html file that implements just the drag and drop described without all the complexities of my app.
So, here is the code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<section id="demos">
<h1>Demos</h1>
<style>
#demos section {
overflow: hidden;
}
.sortable {
width: 310px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.sortable li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
.handle {
cursor: move;
}
.sortable.connected {
width: 200px;
min-height: 100px;
float: left;
}
li.disabled {
opacity: 0.5;
}
li.highlight {
background: #FEE25F;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<section>
<h1>Sortable List</h1>
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1
<li draggable="true" class style="display: list-item;">Item 2
<li draggable="true">Item 3
<li draggable="true">Item 4
<li draggable="true">Item 5
<li draggable="true">Item 6
</ul>
</section>
</section>
<script src="/html5sortable/jquery-1.7.1.min.js"></script>
<script src="/html5sortable/jquery.sortable.js"></script>
<script>
$(function() {
$('#sortable1, #sortable2').sortable();
$('#sortable3').sortable({
items: ':not(.disabled)'
});
$('#sortable-with-handles').sortable({
handle: '.handle'
});
$('#sortable4, #sortable5').sortable({
connectWith: '.connected'
});
});
</script>
</BODY>
</HTML>
But even this is not working. The examples given on the site are working properly, so there has to be something wrong.
I have properly downloaded and included all the files that need to be downloaded/included?

There is an additional "/" in the relative address that you have defined. Remove it.

I think you need to close your li tags like this:
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1</li>
<li draggable="true" class style="display: list-item;">Item 2</li>
<li draggable="true">Item 3</li>
<li draggable="true">Item 4</li>
<li draggable="true">Item 5</li>
<li draggable="true">Item 6</li>
</ul>
fiddle

Running rb_menu() on one div

All of the submenus appear and overlap regardless of which of the three options is selected [Work, Services, Contact] and all are highlighted rather than the one the mouse is hovering over
Is there a way to only display the sub menu that has been selected using CSS and hiding the rest until otherwise clicked?
Can you use an example of how I would do this using the code provided:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$('#menu-wrapper').rb_menu({
triggerEvent: 'click',
hideOnLoad: true,
loadHideDelay: 0,
autoHide: false,
transition: 'swing'
});
});
</script>
<div id="menu-wrapper">
<div id="menu" class="menu clearfix">
<div class="toggle">Work</div>
<div class="items">
<ul>
<li>Basingstoke Treatment Works</li>
<li>Project Two</li>
<li>Project Three</li>
<li>Project Four</li>
<li>Project Five</li>
<li>Project Six</li>
</ul>
</div>
</div>
<div id="menu2" class="menu clearfix">
<div class="toggle">Contact</div>
<div class="items">
<ul>
<li>Mick O'Gorman<br />mick#ogormanconstruction.co.uk<br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br />barry#ogormanconstruction.co.uk<br />+44(0) 7515 569 086</li>
</ul>
</div>
</div>
<div id="services" class="menu clearfix">
<div class="toggle">Services</div>
<div class="items">
<ul>
<li>Site Logistics</li>
<li>Waste Management</li>
<li>Security Services</li>
<li>Traffic Management</li>
<li>Multi Service Gangs</li>
<li>Facilities & Accommodation</li>
<li>Small Works & Maintenance</li>
<li>Catering Services</li>
</ul>
</div>
</div>
</div>
CSS
#menu {
position: relative;
top: 435px;
left: -15px;
width: 60px;
height: 25px;
}
#menu2 {
position: relative;
top: 445px;
left: -15px;
width: 60px;
}
#services {
position: relative;
top: 428px;
left: -15px;
width: 60px;
}
.menu .items a:hover {
text-decoration: none;
}
.menu .items a {
font-size: 11px;
color: #ABA099;
text-decoration: none;
}
.menu .items {
left: 180px;
width: 250px !important;
}
.menu .items li {
width: 250px;
line-height: 19px;
font-size: 11px;
color: #ABA099;
height: 19px;
}
.menu .items li a:hover {
color: #4D4D4F;
}
.menu .toggle {
color: #ABA099;
font-weight: normal;
}
.menu .toggle-hover {
color: #4D4D4F;
}

It looks like your css styles are being overridden somewhere in your page. I have setup a sample page for you to try - this works for me.
Include the following code in the head of your document:
<link rel="stylesheet" type="text/css" href="http://www.getintothis.com/pub/projects/rb_menu/css/rb_menu.css" media="screen,projection" />
<style type="text/css">
#menu-wrapper {
border: 1px solid #bcd;
background: #fbfbfb;
padding: 12px;
overflow: hidden;
width: 540px;
height: 320px;
position: relative;
}
.menu {
margin-bottom: 10px;
}
.toggle {
padding: 6px;
margin-bottom: 2px;
font-size: 12pt !important;
}
.items {
margin-left: 46px;
}
.items li a {
padding: 2px;
}
</style>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery.ui-1.7.min.js"></script>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/rb_menu.js"></script>
<script>
$(document).ready(function(){
$('#menu1').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
$('#menu3').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
});</script>
Then add the following in the body:
<div id="menu-wrapper">
<div id="menu1" class="menu clearfix">
<div class="toggle">Work»</div>
<div class="items" style="display: none; ">
<ul>
<li>Basingstoke Treatment Works</li>
<li>Project Two</li>
<li>Project Three</li>
<li>Project Four</li>
<li>Project Five</li>
<li>Project Six</li>
</ul>
</div>
</div>
<div id="menu2" class="menu clearfix">
<div class="toggle">Contact»</div>
<div class="items" style="display: none; ">
<ul>
<li>Mick O'Gorman<br />mick#ogormanconstruction.co.uk<br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br />barry#ogormanconstruction.co.uk<br />+44(0) 7515 569 086</li>
</ul>
</div>
</div>
<div id="menu3" class="menu clearfix">
<div class="toggle">Services»</div>
<div class="items" style="display: none; ">
<ul>
<li>Site Logistics</li>
<li>Waste Management</li>
<li>Security Services</li>
<li>Traffic Management</li>
<li>Multi Service Gangs</li>
<li>Facilities & Accommodation</li>
<li>Small Works & Maintenance</li>
<li>Catering Services</li>
</ul>
</div>
</div><!--End menu3--></div><!--End menu-wrapper-->
I hope this helps! :)