Jump to Navigation

jQuery Accordion Demo

  • strict warning: Non-static method view::load() should not be called statically in /home1/salonfal/public_html/drupal6/sites/all/modules/views/views.module on line 1118.
  • strict warning: Declaration of views_handler_field::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_field.inc on line 1148.
  • strict warning: Declaration of views_handler_sort::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_sort::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_sort::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_filter.inc on line 599.
  • strict warning: Declaration of views_handler_filter::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_filter.inc on line 599.
  • strict warning: Declaration of views_plugin_query::options_submit() should be compatible with views_plugin::options_submit($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_query.inc on line 181.
  • strict warning: Declaration of views_plugin_style_default::options() should be compatible with views_object::options() in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_style_default.inc on line 24.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_row.inc on line 136.
  • strict warning: Non-static method view::load() should not be called statically in /home1/salonfal/public_html/drupal6/sites/all/modules/views/views.module on line 1118.

Recent Comments

There are a number of ways you could go about "pausing" the slideshow on hover.  I would take a...

Hi,
I love the featured content fader... I actually prefer this over a traditional slider because the effect...

Hi,
Thanks for your posting. It is a great image gallery.
Thanks again. Regards.

Great example, this is a good basic structure for anyone who is new to web development. Thanks.

Hey Tom,

Working with arrays in javascript is pretty easy.  First off you'll need to declare it...

jQuery Accordion Demo

Here is a example of how to create a jQuery accordion.  In this example the expandable/collapsable areas can be remotely opened and closed and will only allow one area to be open at a time.

I have added a rel attribute to each text link that is equal to the id of the area I want to target.  Alternatively you could use any attribute or even a class. 

I also also should note that I normally wouldn't use a table for this sort of structure... div tags would work just fine :)


The HTML

Text Links:
<a href="#noFollow" class="pAcc" rel="tagetID">Link Text</a>

Expandable/Collapsable Areas:
<table>
  <tr class="tdAcc" id="targetID">
    <td>
      <h4>Target Header Text</h4>
      <p>Target Paragraph Text</p>
    </td>
  </tr>
</table>


The jQuery

$('.tdAcc p').hide(); 
$('.tdAcc h3').click(function(){
  var tdAccText = $(this).next('p');
  if ( tdAccText.is(':visible') ) {
    tdAccText.slideUp(200);
  }else{
    $('.tdAcc p').slideUp(200);
    tdAccText.slideDown(200);
  }  
});

$('a.pAcc').click(function(){
  var tdAcc = $(this).attr('rel');
  $('.tdAcc p').slideUp(200);
  $('tr#'+tdAcc).find('p').slideDown(200);
});


The Demo

Web Design Web Development Graphic Design Drupal

Web Design

Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.

Web Development

Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network) . This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, or social network services.

Graphic Design

Graphic design is a collaborative process between a client and a designer — in conjunction with producers of form (i.e., printers, programmers, signmakers, etc.)— to convey a specific message to a targeted audience. The term "graphic design" can also refer to a number of artistic and professional disciplines that focus on visual communication and presentation. The field is also often referred to as Visual Communication or Communication Design. Various methods are used to create and combine words, symbols, and images to create a visual representation of ideas and messages. A graphic designer may use typography, visual arts and page layout techniques to produce the final result. Graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated.

Drupal

Drupal (pronounced /ˈdruːpəl/) is a free and open source content management system (CMS) written in PHP and distributed under the GNU General Public License.[2][3][4] It is used as a back-end system for at least 1% of all websites worldwide ranging from personal blogs to larger corporate and political sites including whitehouse.gov and data.gov.uk.[5][6] It is also used for knowledge management and business collaboration.

Comments

Great example, this is a good basic structure for anyone who is new to web development. Thanks.

I've been trying achieve this for a while but couldn't get only a single area to be open at once. Awesome Demo, thanks.

Post new comment