I built an accordian slider on my site to display images. It uses only HTML & CSS - no JavaScript. I would like to keep it script free since it will be used on my home page and I want those with JS turned off or blocked to see a nice image when they first see the homepage.
It works great. It even switches to a vertical version for phones!
Only one problem: When first loading the page, all the images in the accordian show as the narrow version used for clicking. I want one of the images to show as the expanded / selected / clicked version (not sure what the proper term for that state is…) when the page first opens. Help!
You can see the accordian at the top of this page: http://easydigging.com/Garden_Tool/slider1.html
The pictures are not what I will use in the finished version. I just stuck some in there for testing. Click any one of the squished fork pictures and the accordian will start appearing as it was intended to.
I appreciate any and all ideas 
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:
<!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.