Two unordered lists. When hovering over one list item I need to darken the list items in the other list, but not the hovered list item's own siblings.
With the code below I'm able to darken all other list items but the one being hovered, but I can't seem to get the siblings into the equation.
HTML:
<ul>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
</ul>
<ul>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
</ul>
JQUERY:
$('.tn').hover(
function() {
$(".tn:not(:hover)").not(this).css({"-webkit-filter":"brightness(15%)"});
},
function() {
$(".tn").css({"-webkit-filter":"brightness(100%)"});
}
);
And for anyone who suggests I should just do the hover over the entire unordered list, it's not possible because of certain restrictions of the design :/
html:
<ul class="tnparent">
javascript:
$('.tnparent:not(:hover) .tn').css({"-webkit-filter":"brightness(15%)"})
Use .closest('ul') to find this list, and then operate just on its siblings.
$('.tn').hover(
function() {
var thislist = $(this).closest('ul');
var otherlists = thislist.siblings('ul');
otherlists.find('.tn').css({
"-webkit-filter": "brightness(15%)"
});
},
function() {
$(".tn").css({
"-webkit-filter": "brightness(100%)"
});
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
</ul>
<ul>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
<li class="tn">
<img class="tn-img" src="http://lorempixel.com/360/200" />
</li>
</ul>
You want the opposite ul so lets traverse to the parent of current one, and jump over to the other
$('.tn').hover(function(){
var $currentList = $(this).parent();
var $otherListItems = $currentList.siblings('ul').find('.tn');
$otherListItems.doSomething();
},function(){
/* similar */
})
Related
So i want to make a content slider. I have 8 LI elements and want to make an array with those elements. So far i have done that by adding a unique ID or Name to each of them and making a variable with that element, but i believe that there is a better way of doing this, i just dont know it because i am a designer, not a developer.
Code:
In HTML
<ul>
<li>
<img src="../images2/c++.png" />
<h2>C++ for absolute begginers</h2>
<h3>John Purcell</h3>
</li>
<li>
<img src="../images2/JS.jpg" />
<h2>JavaScript From Scratch</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/cSharp.png" />
<h2>C# From Begginer To Advanced</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/PHP.png" />
<h2>PhP and MySQL For Beginners</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/c++.png" />
<h2>C++ for absolute begginers</h2>
<h3>John Purcell</h3>
</li>
<li>
<img src="../images2/JS.jpg" />
<h2>JavaScript From Scratch</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/cSharp.png" />
<h2>C# From Begginer To Advanced</h2>
<h3>Derek Banas</h3>
</li>
<li>
<img src="../images2/PHP.png" />
<h2>PhP and MySQL For Beginners</h2>
<h3>Derek Banas</h3>
</li>
</ul>
You can get a NodeList of your elements which is similar to an array by using querySelectorAll. If you were to add a class such as list to your ul, you could get them like this:
var items = document.querySelectorAll('.list li')
A NodeList can do some things an array can do. If you need to change it to an array like this:
var itemsArray = [].slice.call(document.querySelectorAll(".list li"));
Add the shared class to each li element like below:
<ul>
<li class="myLiShared">
<img src="../images2/c++.png" />
<h2>C++ for absolute begginers</h2>
<h3>John Purcell</h3>
</li>
<li class="myLiShared">
<img src="../images2/JS.jpg" />
<h2>JavaScript From Scratch</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/cSharp.png" />
<h2>C# From Begginer To Advanced</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/PHP.png" />
<h2>PhP and MySQL For Beginners</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/c++.png" />
<h2>C++ for absolute begginers</h2>
<h3>John Purcell</h3>
</li>
<li class="myLiShared">
<img src="../images2/JS.jpg" />
<h2>JavaScript From Scratch</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/cSharp.png" />
<h2>C# From Begginer To Advanced</h2>
<h3>Derek Banas</h3>
</li>
<li class="myLiShared">
<img src="../images2/PHP.png" />
<h2>PhP and MySQL For Beginners</h2>
<h3>Derek Banas</h3>
</li>
</ul>
Then in your javascript code you can get the li elements as an htmlcollection like so:
let myCollection = document.getElementsByClassName("myLiShared");
//Now you can iterate over your li elements like so
for(let x = 0; x < myCollection.length; x++){
//Do something with your li element
//myCollection[x]
}
This really depends the surrounding code. You can just add a class to each li and use $('.className').toArray(); or if this is your only list, you could even use $('li').toArray();.
For vanilla javascript, you can use document.querySelectorAll('.className'); or document.querySelectorAll('li');
jQuery alternative
Apply a class to your ul element and execute this selector .classname li.
To populate those elements into an array, call the native jQuery function toArray()
Look at this code snippet
var array = $('.list li').toArray();
console.log(array);
.list {
display: none
}
.as-console-wrapper {
max-height: 100% !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><ul class='list'> <li> <img src="../images2/c++.png" /> <h2>C++ for absolute begginers</h2> <h3>John Purcell</h3> </li> <li> <img src="../images2/JS.jpg" /> <h2>JavaScript From Scratch</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/cSharp.png" /> <h2>C# From Begginer To Advanced</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/PHP.png" /> <h2>PhP and MySQL For Beginners</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/c++.png" /> <h2>C++ for absolute begginers</h2> <h3>John Purcell</h3> </li> <li> <img src="../images2/JS.jpg" /> <h2>JavaScript From Scratch</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/cSharp.png" /> <h2>C# From Begginer To Advanced</h2> <h3>Derek Banas</h3> </li> <li> <img src="../images2/PHP.png" /> <h2>PhP and MySQL For Beginners</h2> <h3>Derek Banas</h3> </li></ul>
See? the li elements were populated into an array.
Resource
.toArray()
I would like to use jQuery to add an active class to an <li> only if it contains a nested 'child element' which has a particular class.
Here is the rendered HTML code:
<li class="primary-nav__item primary-nav__item--sub js-header-sub-link">
<a class="primary-nav__link nav__link--sub js-header-sub-link-a" href="/collections/books">Books</a>
<div class="nav__sub" id="sub-3">
<div class="nav__sub-wrap">
<ul class="nav__sub__items o-list-bare">
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--sub js-header-sub-t-link nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
</ul>
</div>
</div>
</li>
Here's what I'd like to happen:
The outermost <li> will get an additional class of primary-nav__item--active only if it contains a "child <li>" which has a class of nav__sub__item--active
Here are the affected lines of code:
Thank you for your assistance!
You can use .closest() and search for '.primary-nav__item' then add your class.
Example:
$('.nav__sub__item--active').closest('.primary-nav__item').addClass('primary-nav__item--active')
You may use:
.addClass( function ): function returning one or more space-separated class names to be added to the existing class name(s).
$('.primary-nav__item').addClass(function(idx, className) {
if ($(this).find('li.nav__sub__item--active').length > 0) {
return 'active';
}
})
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="primary-nav__item primary-nav__item--sub js-header-sub-link">
<a class="primary-nav__link nav__link--sub js-header-sub-link-a" href="/collections/books">Books</a>
<div class="nav__sub" id="sub-3">
<div class="nav__sub-wrap">
<ul class="nav__sub__items o-list-bare">
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--sub js-header-sub-t-link nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
</ul>
</div>
</div>
</li>
jQuery's closest() function is more efficient:
$('.nav__sub__item--active').each(function() {
$(this).closest('li.primary-nav__item').addClass('primary-nav__item--active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="primary-nav__item primary-nav__item--sub js-header-sub-link">
<a class="primary-nav__link nav__link--sub js-header-sub-link-a" href="/collections/books">Books</a>
<div class="nav__sub" id="sub-3">
<div class="nav__sub-wrap">
<ul class="nav__sub__items o-list-bare">
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--sub js-header-sub-t-link nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
You can use the jQuery closest method. It finds the first parent elemeent with a specific selector.
$( document ).ready(function() {
$('.nav__sub__item--active').closest('.primary-nav__item').addClass("active");
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="primary-nav__item primary-nav__item--sub js-header-sub-link">
<a class="primary-nav__link nav__link--sub js-header-sub-link-a" href="/collections/books">Books</a>
<div class="nav__sub" id="sub-3">
<div class="nav__sub-wrap">
<ul class="nav__sub__items o-list-bare">
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item nav__sub__item--sub js-header-sub-t-link nav__sub__item--active">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
<li class="nav__sub__item">
<a class="nav__sub__link" href="#">I'm a sub-link</a>
</li>
</ul>
</div>
</div>
</li>
Recenlty I have been implementing lazy loading in flex slider. I lazy load images using the after event of flex slider. I observed that if arrow icon is pressed rapidly and slides move fast then the after event is not fired. Here is a demo:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider',
after: function(slider) {
console.log("after fired on " + slider.currentSlide);
//$("#flex-carousel-H img").slice( ((slider.currentSlide + 1)*4), (((slider.currentSlide + 2)*4) + 1)).each(flexLazy);
}
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script>
<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
</ul>
</div>
Please try clicking the right arrow icon in bottom thumbnail slider. You will observe that console doesn't log for every slide. But if we click slowly then console logs for every slide.
Question:
1. Why doesn't after event fire for every slide if slides are moved rapidly.
2. How to force after to fire even if slides are moved rapidly.
Thanks
Not sure if you found the answer to this already, but I had this same issue, instead of using the after callback which triggers when the animation finishes you should use the before callback. It triggers "before" the animation starts and it will always fire no matter how quickly you thumb through the slides.
I'm using bxSlider and Bootstrap tabs for a project. I used three sliders in three tabs. The active tab is showing bxSlider but when I click on other tabs it doesn't load slider anymore.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Home
</li>
<li role="presentation">
Profile
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<ul class="bxslider-two">
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<ul class="bxslider">
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
<li>
<img src="http://javieryvaleska.cl/tabs/images/img-home.jpg" />
</li>
</ul>
</div>
</div>
activation:
$(document).ready(function() {
$('.bxslider,.bxslider-two').bxSlider();
});
Sample project
In order to initialize correctly your slider should be visible. The slider on the first tab works because it is visible when bxSlider() is called. One idea is to wait to initiate until the tab is clicked. I modified your jsfiddle with an example.
New jQuery:
$(document).ready(function () {
$('.bxslider-two').bxSlider();
});
$('a[href="#profile"]').one('shown.bs.tab', function (e) {
$('.bxslider').bxSlider();
});
$(document).ready(function() {
$('.bxslider-two').bxSlider();
});
$('a[href="#profile"]').one('shown.bs.tab', function(e) {
$('.bxslider').bxSlider();
});
$( ".tabs-1").click(function() {
$('#tabs-1 .bx-viewport').css("height","433"); //manuall hight
$('#latest_pros .dishes-item').css("width","245"); //manuall width
});
$( ".tabs-2").click(function() {
$('#tabs-2 .bx-viewport').css("height","433");
$('#latest_pros .dishes-item').css("width","245");
});
$( ".tabs-3").click(function() {
$('#tabs-3 .bx-viewport').css("height","433");
$('#latest_pros .dishes-item').css("width","245");
});
need a little help in hiding/showing divs. I know there were a few posts on here but none that specifically targeted what I am looking to do.
My code is below. What I would like to do is have the corresponding DIV display when it is clicked on from the leftColum LI.
<div id="leftColumn">
<ul>
<li> Painting </li>
<li> Landscaping </li>
<li> Kitchen </li>
<li> What's next? </li>
</ul>
</div>
<div id="rightColumnPainting">
<ul>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
</ul>
</div>
<div id="rightColumnLandscaping">
<ul>
<li> <img src="./img/paint1.jpg" /> </li>
<li> <img src="./img/paint2.jpg" /> </li>
<li> <img src="./img/paint3.jpg" /> </li>
<li> <img src="./img/paint4.jpg" /> </li>
</ul>
</div>
<div id="rightColumnKitchen">
<ul>
<li> <img src="./img/yard1.jpg" /> </li>
<li> <img src="./img/yard2.jpg" /> </li>
<li> <img src="./img/yard3.jpg" /> </li>
<li> <img src="./img/yard4.jpg" /> </li>
</ul>
</div>
<div id="rightColumnNext">
<ul>
<li> <img src="./img/house1.jpg" width="100" height="100" /> </li>
<li> <img src="./img/house2.jpg" /> </li>
<li> <img src="./img/house3.jpg" /> </li>
<li> <img src="./img/house4.jpg" /> </li>
</ul>
</div>
For this to work you need to hide the div ul elements, and then use the :target selector to display: block:
#leftColumn {
display: block;
}
#leftColumn ul {
display: block;
}
div ul {
display: none;
}
div:target ul {
display: block;
}
You do, of course, need to ensure that the #leftColumn ul is visible first; and, further, requires that the a elements by which you're navigating within the page has the appropriate id within it's href attribute:
<ul>
<li>Painting</li>
<li>Landscaping</li>
<li>Kitchen</li>
<li>What's next?</li>
</ul>
JS Fiddle demo.