Hi,
This might be a bit difficult to do without JavaScript.
Here's my solution using jQuery (I noticed that you had included it in your page anyway).
What you want to do, is use jQuery to select the tab you want to have open. In my example I have chosen "about".
Then, use jQuery to add a class of "sel" to the section with the id "about" (of course you can change this to any section you want.
The class "sel" is styled so that it displays the accordion picture as though it had been selected.
Then you attach an "onclick" event handler to remove the "sel" class, as soon as any of the other links are clicked.
People with JavaScript turned off, lose no functionality.
People with JS activated, get to see one of the pictures already selected.
Here is an example for you to play around with:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home 1</title>
<link href="http://easydigging.com/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://easydigging.com/assets/css/easydigging.css" rel="stylesheet">
<style>
.sel a{display:none;}
.sel img{display: block; height:300px; margin-top:0px;}
section.sel {width:300px;}
</style>
</head>
<body>
<div class="accordion horizontal">
<section id="about">
<a href="#about"><img src="http://easydigging.com/images-new/fork-hoe-icon.jpg" alt="Chillington Canterbury Fork" /></a>
<img class="full-size" src="http://easydigging.com/images-new/pointed-hoe-icon.jpg">
</section>
<section id="services">
<a href="#services"><img src="http://easydigging.com/images-new/fork-hoe-icon.jpg" alt="Chillington Canterbury Fork" /></a>
<img class="full-size" src="http://easydigging.com/images-new/pointed-hoe-icon.jpg">
</section>
<section id="blog">
<a href="#blog"><img src="http://easydigging.com/images-new/fork-hoe-icon.jpg" alt="Chillington Canterbury Fork" /></a>
<img class="full-size" src="http://easydigging.com/images-new/pointed-hoe-icon.jpg">
</section>
<section id="portfolio">
<a href="#portfolio"><img src="http://easydigging.com/images-new/fork-hoe-icon.jpg" alt="Chillington Canterbury Fork" /></a>
<img class="full-size" src="http://easydigging.com/images-new/pointed-hoe-icon.jpg">
</section>
<section id="contact">
<a href="#contact"><img src="http://easydigging.com/images-new/fork-hoe-icon.jpg" alt="Chillington Canterbury Fork" /></a>
<img class="full-size" src="http://easydigging.com/images-new/pointed-hoe-icon.jpg">
</section>
</div>
<script src="http://easydigging.com/assets/js/jquery.js"></script>
<script>
$(document).ready(function(){
$("#about").addClass("sel");
$(".horizontal a").click(function(){
$(".sel").removeClass("sel");
});
});
</script>
</body>
</html>
I hope that helps.
If you have any questions, just let me know.
Reply With Quote
Bookmarks