jQuery + anchor based accordion 44 Responses

Last post: 2 months, 2 weeks ago | Thread started: Sep 4, 08, 3:07 p.m.

RespondNew TopicDisable Images

• bezul555

  Hi Guys, does anyone of you have or know some examples of query accordion that works on anchors (similar to this: http://www.duarte.com/#1.0.0 - this one is using different framework);

  Once you click section - content is expanded and scrolled to top and # anchor appears in address bar. I have found a lot of accordion examples, but without anchor option. I also tried to combine accordion and scrollTo effectg but something went wrong.

  Sep 4, 08, 3:07 p.m. – Permalink

• adev

  well first, that site is Flash, not javascript.. But here's soomething similar, sorta.... http://www.typeblue.com/temp/

  • you can modify the placement of the items so it scrolls right left instead of back and fort/up down– adev1/2

    oops, sorry I thought you meant the top part with the screens.. :/– adev2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earSep 4, 08, 3:53 p.m. – Permalink

• janne76

  http://bassistance.de/jquery-plu…

  demo:
  http://jquery.bassistance.de/acc…

  not sure about anchors though

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earSep 4, 08, 3:56 p.m. – Permalink

• acescence

  I find the accordion plugin to be quite bloated since it's a does-everything-for-everyone type of thing.

  I usually just do this stuff manually using slideUp and slideDown and binding them to whatever you want to trigger the actions.

  the hash bit is a simple matter of just setting location.hash whenever something is clicked.

  on document load, you can retrieve location.hash and open the proper section

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earSep 4, 08, 4:48 p.m. – Permalink

• bezul555

  Good thing about anchor is that when you type address manually, you'll get the panel expanded; I have accordion working already, but can't combine it with anchors or slideTo effect; here is my code for accordion:

  $(document).ready(function() {
  $('#box> div> div.content').hide();
  $('#headerMain > div').slideDown('slow');
  $('#box> div> h2').click(function() {
  var $nextDiv = $(this).next();
  //var $visibleSiblings = $nextDiv.siblings('#box> div.content:visible');

  var $visibleSiblings = $(this).parent().siblings('#box> div').children('div:visible');

  if ($visibleSiblings.length ) {
  $visibleSiblings.slideUp(500, function() {
  $nextDiv.slideToggle(600);
  });
  } else {
  $nextDiv.slideToggle(600);
  }
  });
  });

  adev - thanks for example with nice effect ;)

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earSep 5, 08, 4:40 a.m. – Permalink