SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    keeping boxes open

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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).
    I'm using html and css only

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Yeah, but you're using JavaScript for the animation, aren't you?

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Yeah, but you're using JavaScript for the animation, aren't you?
    No

    It's all pure html5 and css3

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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)?
    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. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.
    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. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code CSS:
    .accordion h2 + div{height: 0px;}

    and an open one looks like this:

    Code CSS:
    .accordion h2 + div{height: 300px;}

    So, the best way to achieve what you want is to define a class, let's call it "open"

    Code CSS:
    .accordion h2 + div.open{height: 300px;}

    Now apply this class to the panels we want open on page load:

    e.g. no. 1

    HTML Code:
    <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

    HTML Code:
    <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:

    Code JavaScript:
    $(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. #13
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •