Results 1 to 2 of 2

Thread: [JQuery] Accordion Control

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    [JQuery] Accordion Control

    You may have seen my pure CSS accordion control, well here is a JQuery version that I much rather. The only external resource is Google's font CDN(href here).

    HTML:
    HTML Code:
    <section class="accordion">
      <header class="accordionHeader">
        <h2>Title</h2>
        <i class="material-icons">expand_more</i>
        <i class="material-icons">expand_less</i>
      </header>
      <section>
        
      </section>
    </section>
    
    <section class="accordion">
      <header class="accordionHeader">
        <h2>Title</h2>
        <i class="material-icons">expand_more</i>
        <i class="material-icons">expand_less</i>
      </header>
      <section>
        
      </section>
    </section>
    CSS
    Code:
    .accordionHeader {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
      align-content: stretch;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      
      border-bottom: 1px solid #666;
    }
    
    .accordionHeader h2 {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
    }
    
    .accordionHeader i {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
      
      cursor: pointer;
      border: 2px solid #666;
      border-radius: 50%;
    }
    JQuery:
    Code:
    $(function() {
      $('.accordionHeader i:last-child').hide();
      $('.accordion').children('section').hide();
      $('.accordionHeader i').on('click', function() {
        $(this).parent().children('i').toggle();
        $(this).parent().next('section').toggle();
      });
    });
    Fiddle: http://codepen.io/anon/pen/WrWbzR
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: [JQuery] Accordion Control

    Here is what an ACCORDION looks like with a jQuery UI Theme - use the Theme Roller to make a theme for your own.

    http://jqueryui.com/themeroller/ Check out the GALLERY and the START theme - that's what I'm using below (at least that's what I started with).
    Attached Images Attached Images  
    Last edited by szlamany; Feb 16th, 2016 at 04:46 PM.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

Posting Permissions

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



Click Here to Expand Forum to Full Width