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.
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 am trying to create a dropdown menu. This code for it is:
<script type="text/javascript">
$(document).ready(function(e) {
$('.has-sub').hover(function() {
$(this).toggleClass("tap", 350, "easeOutSine");
});
});
</script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
What I trying to do is to create a hover delay for parent of the Dropdown. You would need to hover over "Flight Briefing" for 2 seconds for the Dropdown menu to appear.
I have tried some other solutions that were provided with different questions, but they did not work.
Your .hover() function is a little wrong - you need a mouseenter and mouseleave function - I have set a timer of 2000 ms (2s) by using setTimeout() to give the 2 sec delay (although in my opinion thats a really long time to hover on an element beforehte effect occurs) and have the mouseout hide the ul directly. I am showing the ul buy habing the .has-sub ul have a display:none and then by adding the .tap class- display:block.
$(document).ready(function(){
$('.has-sub').hover(
function(){setTimeout(function(){$('.has-sub').addClass("tap")},2000)},
function(){$(this).removeClass("tap"); clearTimeout()}
);
});
.has-sub ul{display:none}
.tap ul{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
Here you go. If you need anything else, let me know.
$('.link').mouseenter(function(){
int = setTimeout(() => {
$('.dropdown').fadeIn();
}, 2000);
}).mouseleave(function(){
clearTimeout(int);
});
.dropdown {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html" class='link'>
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul class='dropdown'>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</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 am attempting to make a mobile version of an OrgChart I created; however, I am having trouble with trying to stack my ul and li elements in the way that I want them. Essentially, I need the elements to stack on one another like my crudely drawn ms paint here:
What I have now is a series of ul elements nested within some li elements. Each ul element nested within the li element suggests that said element is the parent to one or more li elements. See CodePen: http://codepen.io/jacob_johnson/pen/xwLmWo
I couldn't care less about the connectors right now but I am having a hard time understanding how I'd stack these elements. I'm relatively new when it comes to HTML/CSS... Hell, if this is achievable with some JavaScript I'm all ears for that as well; however, this will be for mobile (i.e. when the screen width is very tiny).
Here's a sample of how my HTML is set up:
<div class="tree">
<ul>
<li>
<div id="ss_menu">
<a class="ss_button"><span>Director </span></a>
<div class="ss_content">
<img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
</div>
</div>
<ul>
<li>
<div id="ss_menu">
<a class="ss_button"><span>Assistant to the Director </span></a>
<div class="ss_content">
<img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
</div>
</div>
<ul>
<li>
<div id="ss_menu">
<a class="ss_button"><span>Deputy Director </span></a>
<div class="ss_content">
<img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
</div>
</div>
<ul>
<li>
<br/><br/><br/>
<ul>
<li>
<div id="ss_menu">
<a class="ss_button"><span>Associate Director </span></a>
<div class="ss_content">
<img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
</div>
</div>
<ul>
<li>
<br/><br/><br/>
<ul>
<li>
<br/><br/><br/>
<ul>
<li>
<span>Consumer Laws & Regulations</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div id="ss_menu">
<a class="ss_button"><span>Senior Associate Director </span></a>
<div class="ss_content">
<img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
</div>
</div>
<ul>
<li>
<br/><br/><br/>
<ul>
<li>
<br/><br/><br/>
<ul>
<li>
<div id="ss_menu">
<a class="ss_button"><span>Assistant Director </span></a>
<div class="ss_content">
<img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
</div>
</div>
<ul>
<li>
<span>Examiner Training </span>
</li>
<li>
<span>Supervision Administration </span>
</li>
<li>
<span>Reserve Bank Oversight</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
You shouldn't use an ID for multiple objects, normally the practice is to use them one time and for jQuery / Javascript functionality. I'd change ss_menu to a class. As for as the style on mobile I'd use a media query and start with this:
#media (max-width: 600px) {
.tree li a, li{
display:block;
width:100%;
box-sizing:border-box;
}
}
I would like to show a div with id "houseImages" on page load while hiding divs "landImages", "renovationImages", "UpcomingImages", and "voteForNext". Upon clicking "Landscaping", I would like to display the div "landImages" and hide div "houseImages". Obviously, I would like this functionality to continue through the list and when I click "Painting" that div would reappear. How would I do this using JavaScript?
Here is what I have so far:
<Div id="mainContent">
<h2> Our House </h2>
<div id="columnLeft">
<ul>
<li id="leftColumnPainting">
Painting
</li>
<li id="leftColumnLandscaping">
Landscaping
</li>
<li id="leftColumnRenovations">
Renovations
</li>
<li id="leftColumnUpcoming">
Upcoming
</li>
<li id="leftColumnNext">
Vote for <br>Next!</br>
</li>
</ul>
</div>
<div id="columnRight">
<div id="title">
<p> Over the course of a couple years we have done a number of projects around the house. Click on a link to your left to see the improvements! Don't forget to vote for what's next!
</p>
</div>
<div id="houseImages">
<ul>
<li>
<img src="./img/house1.jpg" />
</li>
<li>
<img src="./img/house2.jpg" />
</li>
<li>
<img src="./img/house3.jpg" />
</li>
<li>
<img src="./img/house4.jpg" />
</li>
</ul>
</div>
<div id="landImages">
<ul>
<li>
<img src="./img/land1.jpg" />
</li>
<li>
<img src="./img/land2.jpg" />
</li>
<li>
<img src="./img/land3.jpg" />
</li>
<li>
<img src="./img/land4.jpg" />
</li>
</ul>
</div>
<div id="renovationImages">
<ul>
<li>
<img src="./img/renovation1.jpg" />
</li>
<li>
<img src="./img/renovation2.jpg" />
</li>
<li>
<img src="./img/renovation3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="upcomingImages">
<ul>
<li>
<img src="./img/upcoming1.jpg" />
</li>
<li>
<img src="./img/upcoming2.jpg" />
</li>
<li>
<img src="./img/upcoming3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="voteForNext">
<p> enter in voting form here</p>
</div>
</div>
</Div>
I'd suggest changing your <a href=""> to the ID of the div you would like to show. Then you can do something like:
$("#columnleft li a").click(function(e) {
e.preventDefault();
$("columnright div").hide();
$("#"+$(this).attr("href")).show();
});
I personally like the Hide -> fadeIn effect combination. If you have a 2 buttons a 2 divs, you can toggle which one is show like this:
HTML:
<div id="a">div 1</div>
<div id="b">div 2</div>
<button id="c">show div 1</button>
<button id="d">show div 2</button>
CSS:
div{
width: 200px;
height: 200px;
border: solid 1px;
display: none;
}
JS:
$('#c').click(function() {
$('#b').hide();
$('#a').fadeIn();
});
$('#d').click(function() {
$('#a').hide();
$('#b').fadeIn();
});
See the JSfiddle: http://jsfiddle.net/HSNLN/
You attach this method to any event you can catch with jQuery, and show/hide and divs.