3

I simply want the contents of the HTML5 details tag to 'glide'/animate open rather than just pop open/appear instantly. Is this possible with jQuery/Javascript?

Fiddle

HTML: 

<details> <summary>Show/Hide</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet metus auctor tempor dignissim. Nunc tempor ligula malesuada, adipiscing justo quis, ultrices libero. Curabitur pretium odio sagittis lorem euismod, a ultrices sem ultrices. Integer sapien nibh, mollis id pretium id, dignissim ut dui. Nam sit amet lectus lectus. Cras scelerisque risus a dui accumsan, in dignissim dolor sodales. Nunc aliquam pharetra dui, a consectetur velit lobortis vel.</p> <p>Mauris convallis orci in semper aliquam. Ut mollis laoreet nibh pretium tincidunt. Donec aliquam at odio sit amet dictum. Phasellus sapien leo, feugiat sit amet sagittis in, congue vel lectus. Donec elementum est vitae nulla interdum laoreet. Curabitur fringilla a tellus non laoreet. Aliquam vel lectus convallis massa pulvinar pellentesque. Mauris laoreet pharetra turpis vel tristique. Sed ligula ligula, sodales sed auctor in, aliquam sit amet lorem. Etiam vestibulum, libero vel dignissim ultrices, lacus mauris lacinia enim, quis aliquam nibh mauris eu mauris. Etiam sapien leo, dapibus et libero sed, laoreet ornare tellus.</p> <p>Sed placerat vehicula magna et adipiscing. Nam euismod nibh ut tellus tempor, eget lobortis metus iaculis. In laoreet, enim in dignissim pellentesque, felis augue tincidunt massa, vestibulum fringilla mauris sapien in diam. Duis interdum molestie fermentum. Aenean dictum varius augue, id luctus neque viverra id. Nam eleifend tempus mauris in mattis. Sed id risus non magna semper blandit in vel arcu. Suspendisse quis nisi ligula. Fusce vestibulum at enim eu.</p> </details>
Improve this question
2
  • use css transitions and over-ride/spec height in regard to the open attribute. you can animate a sub-container just inside for easier xbrowser compat. Commented Jan 24, 2014 at 22:50
  • Duplicate (using CSS-only) see: Animate Details height using HTML, CSS Commented Oct 30, 2024 at 16:41

2 Answers 2

Reset to default
6

Too bad a simple CSS transition can't be used.

I'd therefore suggest wrapping the sibling elements of the summary element and then using .slideToggle() on them. It isn't that simple though, you need to add the open attribute to details, and hide the inner wrapped elements by default.

This only works if you use e.preventDefault() to prevent the default functionality; however, you then need to rewrite the arrow indicators, (►,▼).

You would use summary::-webkit-details-marker and display:none to remove the marker that is no longer working, and add your own custom markers via the :before/:after pseudo elements.

UPDATED EXAMPLE HERE

$('details summary').each(function(){ $(this).nextAll().wrapAll('<div id="wrap"></div>'); }); $('details').attr('open','').find('#wrap').css('display','none'); $('details summary').click(function(e) { e.preventDefault(); $(this).siblings('div#wrap').slideToggle(function(){ $(this).parent('details').toggleClass('open'); }); });

CSS:

summary::-webkit-details-marker { display: none; } summary:before { content: "►"; } details.open summary:before { content: "▼"; }

If you want the details element to be open by default, add class="open" as opposed to the attribute open, and then use this: $('details.open div#wrap').css('display','block');

ALTERNATIVE EXAMPLE - (open by default)

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hey Josh, thanks for the reply. I'm wondering through it seems that the 'toggle' on the left hand side stops working (at least for me in Chrome). Also, it doesn't seem to work when you add more drop downs. See jsfiddle.net/fakeguybrushthreepwood/gY398/2
@fakeguybrushthreepwood Good point - I fixed all that; see the update. It's worth noting that it now works in all major browsers. That was a lot of work for a simple animation, hopefully it will be useful to people in the future, I have a feeling this will be a popular question for search engines :)
I am really struggling to add this into the actual website I am building (I'd love to link but since it's a clients site, not sure if they would be thrilled with having their site on here), as you might be able to tell - been working on this for so long that maybe I am missing something - so I am continuing down another path with just jquery and css.
@fakeguybrushthreepwood Alright, well this is still a good solution for anyone who needs to animate a details element. I'd agree though, it would be best to just avoid it completely as you have done and use different HTML. If you have any questions, let me know.
3

Based on @JoshCrozier's answer, I've made a solution that uses the open attribute instead of the extra open class. This way you don't have to change the css.

If you would like to use css to change the appearance of the <details> element, you can use the same style rules regardless of whether the browser supports the <details> element, and regardless of whether javascript is enabled in the browser, since you only have to consider the open attribute, and no special classes.

In addition, there is no special id on the wrapper element, making the solution slightly more robust and generic.

Also, this solutions takes <details> elements that should be open by default into account.

$('details summary').each(function() { var $Wrapper = $(this).nextAll().wrapAll('<div></div>').parent(); // Hide elements that are not open by default if(!$(this).parent('details').attr('open')) $Wrapper.hide(); $(this).click(function(Event) { Event.preventDefault(); if($(this).parent('details').attr('open')) { $Wrapper.slideUp(function() { // Remove the open attribute after sliding so, so the animation is visible in browsers supporting the <details> element $(this).parent('details').removeAttr('open'); }); } else { // Add the open attribute before sliding down, so the animation is visible in browsers supporting the <details> element $(this).parent('details').attr('open', true); $Wrapper.slideDown(); } }); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.