Hi there hantaah,
In the end this turned out to be pretty easy to do.
Looking at your CSS I could see that you are altering the height of the div directly after the accordion’s heading to achieve the slide.
And this is what I was driving at in the previous posts.
A closed panel looks like this:
.accordion h2 + div{height: 0px;}
and an open one looks like this:
.accordion h2 + div{height: 300px;}
So, the best way to achieve what you want is to define a class, let’s call it “open”
.accordion h2 + div.open{height: 300px;}
Now apply this class to the panels we want open on page load:
e.g. no. 1
<div class="accordion">
<section id="1">
<h2><a href="#1">1 - When?</a></h2>
<div class="open">
<img src="#" alt="pic" width="120" height="120">
</div>
</section>
</div>
and no. 2
<div class="accordion">
<section id="2">
<h2><a href="#2">2 - Who For?</a></h2>
<div class="open">
<img src="#" width="120" height="120" alt="pic">
</div>
</section>
</div>
This will open the panels on page load already, but when you click on another panel they will stay open.
To remedy this, we can use a little jQuery (I saw you were including it anyway).
jQuery has a handy function for executing an event handler only once, which we can use to remove the open classes when the user clicks on a different accordion panel:
$(document).ready(function(){
$(".accordion").one('click', function(){
jQuery("div").removeClass("open");
});
});
After this, things should work as expected.
Here’s a little demo to show you all of this in action.
P.S. Thank you for making a simple version for me with just the accordions. This helped a lot.