Keeping boxes open

JavaScript
1

On my page here I have some boxes that open content when you click on them. When you clcik on one the other one closes. Is it possible to have the first two open when the page is opened and only have them close when the others are clicked?

I would just like them ( the first 2 ) to be open when you enter the page

2

Hi,

Which script are you using to achieve the accordion effect?
For some bizarre reason, when I try and look at the page source, I get the source code of the previous page (weird).

3

I’m using html and css only

4

Yeah, but you’re using JavaScript for the animation, aren’t you?

5

No

It’s all pure html5 and css3

6

OK.
So do you have any way of differentiating an expanded accordion panel from an unexpanded one (a class name for example, or setting the contents to display:block)?

7

yes each one has an section id, i’ll post the html here:

<div class=“accordion”>
<section id=“1”>
<h2><a href=“#1”>1 - We Are Mums</a></h2>
<div>
<img src=“http://www.sakeenaheducationcentre.com/wp-content/uploads/2013/01/jannah.jpg” alt=“pic” width=“120” height=“120”>
<p></p>
<p><br><br><br><br><br><br><br></p>
<p>We Are a group of mums that home educate our children.</p>
</div>
</section>
</div>

I think you should be able to see the css in firebug or inspect the element in chrome as it’s quite a bit of css

8

Sorry, that’s not quite what I meant.
We need to find a way to distinguish an open panel from a closed one.
What CSS properties are different between the two?

When you’re working with JS you might dynamically apply a class name to the panel that is opened.

Either way, once we can identify how an open panel difers from a closed one, we can just add a bit of JS which applies the necessary CSS on page load.

9

I think that would be it, each section has an id. section id=“1” section id=“2” etc. I have noticed that when you click on each section it changes the url. I mean clicking on section 1 url is: http://www.sakeenaheducationcentre.com/#1 clicking on section 2 url is http://www.sakeenaheducationcentre.com/#2 and so on. This makes it posible for only one to be open at a time I think. What do you think?

10

Ok, I see what you mean.
Using the URL you are only ever going to be able to have one panel open at any one time.
Still, there might be a way to do it.
Could you make me a minimalist page with three accordion panels on it (e.g. “1-When”, “2-Who for?” and “3-Subjects”).
Strip out all of the other unnecessary content and CSS, then let me know and I’ll have a look.

11

Yep sure, this will be really interesting and great work if you can do it!!!

I have this page but what css should I take out? Shall i comment all of the css out?

12

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.

13

Genius!!! And i really like it thanks… I’m a nov with js though, which js file should I place your code in? ( oh sorry I got it, I placed it in the bottom of script.js and it works so guessing it’s right. It works a treat.
Very happy
Thank You

14

You can place it in any file you like really, just as long as it gets called after jQuery is loaded.
Ideally it should come somewhere just before the closing </body> tag of your HTML.
Glad you like it :slight_smile: