Develop Reference

Get the contents of div items

I want to get the data in a within the description inside the product items. I'm trying to do this with jquery.
$(".dl-view-item").click(function() {
var sku = $(this).find(".product.description").find.data("sku");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item">
<div class="product">
<div class="description" data-sku="sample-data">
</div>
</div>
</div>
I want to get the data in data-sku

You could try this.
$(".dl-view-item").click(function() {
var sku = $(this).find(".product.description");
console.log(sku)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item">
<div class="product">
<div class="description" data-sku="sample-data">
Lorem ipsum
</div>
</div>
</div>

this will work for you.
$(document).ready(function(){
$(".dl-view-item").click(function () {
var sku = $(this).find("div.description").data("sku");
$(this).find("div.description").text(sku);
});
});

You are missing a space between your selector classes.
.product.description
Alternatively, instead of simply supplying a space here, you could use a child combinator since the description is an immediate child of the the product container. If this is not the case, you can remove the > in the selector.
.product > .description
$('.dl-view-item').click(function() {
var sku = $(this).find('.product > .description').data('sku');
console.log(sku);
});
.dl-view-item {
display: block;
width: 32px;
height: 32px;
background: red;
border-radius: 50%;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item">
<div class="product">
<div class="description" data-sku="sample-data">
</div>
</div>
</div>
By the way, you can do this without jQuery.
document.querySelectorAll('.dl-view-item').forEach(el => {
el.addEventListener('click', (e) => {
let sku = e.target.querySelector('.product > .description').dataset.sku;
console.log(sku);
})
});
.dl-view-item {
display: block;
width: 32px;
height: 32px;
background: red;
border-radius: 50%;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item">
<div class="product">
<div class="description" data-sku="sample-data">
</div>
</div>
</div>

$(".dl-view-item").click(function () {
var sku = $(".dl-view-item").find("div.description").attr("data-sku");
console.log(sku);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item"> Click Me!
<div class="product">
<div class="description" data-sku="sample-data">
</div>
</div>
</div>

Apply CSS class on hover to other element

I've this HTML structure:
<div class="container">
<div class="list-wrapper">
<ul>
<li class="item-first">
</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first"></div>
</div>
</div>
So is it possible to set the .description-first to opacity: 1; when hovering .item-first? Or is this just possible with JS? Thanks for your help!

As Strebler said, this is only possible with Javascript.
function MouseOver(value) {
document.getElementsByClassName("description-first")[0].setAttribute("style", "opacity: " + value + ";");
}
.description-first {
opacity:0;
}
<div class="container">
<div class="list-wrapper">
<ul>
<li onmouseover="MouseOver('1');" onmouseout="MouseOver('0');" class="item-first">hover here
</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first">to make this appear</div>
</div>
</div>

Not possible. The closest you will get in css is using the .list-wrapper on hover like this:
.list-wrapper:hover + .description-wrapper > .description-first {
opacity: 1;
}
But that's not what you want I guess. :)

This is my solution. With my solution I can add a class depending on the index.
jQuery("li").hover(function () {
jQuery(".description-wrapper").children().eq(jQuery(this).index()).toggleClass("description-visible");
});
.description-wrapper div {
opacity: 0;
}
.description-visible {
opacity: 1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="list-wrapper">
<ul>
<li class="item-first">First</li>
<li class="item-second">Second</li>
<li class="item-third">Third</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first">First</div>
<div class="description-second">Second</div>
<div class="description-third">Third</div>
</div>
</div>

Hide a div that is currently opened and show the div thats clicked,and vice versa

I basically want to create a product listing page using jquery, just like this page: https://losangeles.sharegrid.com/browse/
Here is my code:
$(function(){
$('.link').click(function(){
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('#'+id).show();
});
});
.container {
width: 100%;
height: auto;
}
.eighty-percent {
width: 80%;
margin: 0 auto;
}
.categories {
width: 20%;
float: left;
ul {
li {
ul {
display: none;
}
}
}
}
.products-list {
width: 80%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="eighty-percent">
<div class="categories left">
<ul>
<li>
<a href="#" class="link" id="main-category" rel="main1">
main-category-one
</a>
<ul>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list" id="main-sub1">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub2">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub3">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub4">
<h1>sub category one</h1>
</div>
</div>
</div>
</div>
Now the problem I am having is as you can see, I cannot make the div that is currently opened make hidden when I click on the other sub category links. I hope my snippet will make clear what I am trying to achieve

All changes and details are commented within the source.
FIDDLE
SNIPPET
$(function() {
$('.link').click(function(event) {
/*
Added to prevent <a>nchor links
from jumping. Note the `event`
parameter above as well.
*/
event.preventDefault();
$(this).next('ul').toggle();
var id = $(this).attr("rel");
/*
Added a class (i.e. `sub`), to
each #main-sub* so all of them will
be targeted to hide by the .hide()
method.
*/
$('.sub').hide();
$('#' + id).show();
});
});
.container {
width: 100%;
height: auto;
}
/*
Added to prevent the right
column from wrapping under
the left column.
*/
.subList {
height: 100vw;
display: none;
}
.categories {
width: 50%;
float: left;
}
.products-list {
width: 50%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!--Removed .eighty-percent because it
hindered layout in demo only,
adding it or removing it shouln't
affect functionality in your production version.-->
<div class="categories left">
<ul>
<li>
main-category-one
<!--Added a class (i.e. subList)
in order to style it easier,
see CSS for why styling was needed -->
<ul class="subList">
<!--Changed each <a>nchor id as a
unique one. You should never have more
than one of the same id on a page.-->
<li>sub-cat-one
</li>
<li>sub-cat-two
</li>
<li>sub-cat-three
</li>
<li>sub-cat-four
</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list sub" id="main-sub1">
<h2>sub category one</h2>
</div>
<div class="products-list sub" id="main-sub2">
<h2>sub category two</h2>
</div>
<div class="products-list sub" id="main-sub3">
<h2>sub category three</h2>
</div>
<div class="products-list sub" id="main-sub4">
<h2>sub category four</h2>
</div>
</div>
</div>

As far as I understood, you want to hide the main div when another was clicked.
This would achieve it:
$(function() {
$('.link').click(function() {
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('div[id^="main"]').hide(); // added line
$('#' + id).show();
});
});

Toggle same div content with another div content

I want to be able to click on div.square-1 and have it toggle with div.square-2
The div itself needs to act like a button, I don't want an external button to activate the toggle like they did on jQuery documentation
Here is a sample of my code.
<a href="#" >
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
.square-box {
width: 100px;
height: 100px;
}
#square-1 {
background-color: blue;
}
#square-2 {
background-color: red;
}
What is the best way to achieve this?

When you click on div.square-1 it will get content of div.square-2
var content1 = $('.square-1').html();
var content2 = $('.square-2').html();
var content = 1;
$('.square-1').click(function() {
if (content == 1) {
$(this).html(content2);
content = 2;
} else {
$(this).html(content1);
content = 1;
}
});
.square-box {
width: 100px;
height: 100px;
}
#square-1 {
background-color: blue;
}
#square-2 {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>

HI now try to this way
.html()
first of you save your square-1 div content than replace your content your square-2 div
$(document).ready(function(){
$('.square-1').on('click', function(){
var thisText = $(this).find('h1').text();
$('.square-2 h1').html(thisText);
});
});
.square-box {
width: 100px;
height: 100px;
}
.square-1 {
background-color: blue;
}
.square-2 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" >
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>

Have a look at this, it may be the best suited method.

Display div's on Menu item click

I am working on a site which has only one page, instead of loading different pages for different bits of content; I want the content to change but not the page therefore decreasing loading and creating a nice effect.
As you can see from my code below it's long but it works, I am sure there is a much easier way to do it and animating between the divs.
http://jsfiddle.net/ssLY3/
HTML
<ul class="side-nav" id="sideNav">
<li id="homeNav">Home</li>
<li id="bioNav">Biography</li>
<li id="musicNav">Music</li>
<li id="photosNav">Photos</li>
<li id="shopNav">Shop</li>
</ul>
<div id="homePage">
<p>HOME PAGE</p>
</div>
<div id="biogPage">
<p>BIOG PAGE</p>
</div>
<div id="musicPage">
<p>MUSIC PAGE</p>
</div>
<div id="photosPage">
<p>PHOTOS PAGE</p>
</div>
<div id="shopPage">
<p>SHOP PAGE</p>
</div>
JS
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();
$('#homeNav').click(function () {
$('#homePage').show();
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();
});
$('#bioNav').click(function () {
$('#homePage').hide();
$('#biogPage').show();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();
});
$('#musicNav').click(function () {
$('#homePage').hide();
$('#biogPage').hide();
$('#musicPage').show();
$('#photosPage').hide();
$('#shopPage').hide();
});
$('#photosNav').click(function () {
$('#homePage').hide();
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').show();
$('#shopPage').hide();
});
$('#shopNav').click(function () {
$('#homePage').hide();
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').show();
});

Try to wrap all of your divs inside a parent div:
<div id="wrapper">
<div id="homePage"><p>HOME PAGE</p></div>
<div id="biogPage"><p>BIOG PAGE</p></div>
<div id="musicPage"><p>MUSIC PAGE</p></div>
<div id="photosPage"><p>PHOTOS PAGE</p></div>
<div id="shopPage"><p>SHOP PAGE</p></div>
</div>
Then you can take advantage of the index of your list to show according div element:
$(document).ready(function(){
$('#biogPage, #musicPage, #photosPage, #shopPage').hide();
$(".side-nav li").each(function(i) {
$(this).click(function() {
$("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
});
});
});
Updated Fiddle

html
<a class="link" title="div1" href="#">link1</a>
<a class="link" title="div2" href="#">link2</a>
<a class="link" title="div3" href="#">link3</a>
<a class="link" title="div4" href="#">link4</a>
<div class="clearfix">
<div id="div1" class="box">div1</div>
<div id="div2" class="box">div2</div>
<div id="div3" class="box">div3</div>
<div id="div4" class="box">div4</div>
</div>
CSS
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
html .clearfix {
height: 1%;
}
.box {
display: block;
padding: 25px;
background-color: #ccc;
border: 1px solid #333;
float: left;
margin-right: 5px;
}
Minimized javascript
(function() {
$('.link').click(function(e) {
$('.box').hide();
$('#' + $(this).attr('title')).show();
e.preventDefault();
});
})();
i think this javascript is probably the most minimal one
check this jsfiddle
http://jsfiddle.net/bqBaA/
vote up if u like this

Another way that changes your HTML as little as possible:
HTML:
<ul class="side-nav" id="sideNav">
<li>Home</li>
<li>Blog</li>
<li>Music</li>
</ul>
<div id="home" class="page"><p>HOME PAGE</p></div>
<div id="blog" class="page"><p>BLOG PAGE</p></div>
<div id="music" class="page"><p>MUSIC PAGE</p></div>
Javascript:
$(document).ready(function(){
var hideall = function() {
$(".page").each(function() {
$(this).hide();
});
};
hideall();
$(".side-nav li a").each(function() {
$(this).click(function() {
var ta = $(this).text().toLowerCase();
hideall();
$("#"+ta).show();
});
});
});