SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    139
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Accordian with no JS - how to have 1 image be expanded upon opening the page?

    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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)


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
  •