3


I´m developing a responsive website where I use the <details> <summary> elements to show aditional information in the services section.

How can I change the details "open" attribute when the window width > 768px ?
It´s possible to do only with css?

Here is the html code:

<section id="services">
    <section>
        <details>
            <summary>info</summary>
            <p>A paragraph with especific information</p>
        </details>
   </section>
</section>

I can use a javascript code like this, but prefer css:

  var desplegable = $("#services section details");
if ($(window).width() > 768) {
    if (desplegable.attr("open") != "open"){ 
        desplegable.attr('open','true');

    }
}

Any idea? Thanks

The Spetec: http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element

Toto
  • 89,455
  • 62
  • 89
  • 125
Swazy
  • 35
  • 4

2 Answers2

1

As of now, there is no way of modifiying the display of <details> contents via CSS (e.g. like: details > * { display: block; } for media queries.), because there seemingly is no spec for it.

As Amelia Bellamy-Royds puts it:

You can’t actually describe it’s basic behavior with the CSS model. The part that shows/hides isn’t in any particular element. Which means there’s no way to implement a media-query override that says if the screen is big enough, show this all the time. So it doesn’t replace all your show/hide navigation widgets.
Because open/closed is done through a simple attribute, and there is no pseudoclass, if you want to (a) have some elements open to start, and (b) change styles for open and closed, you might need some scripted support testing so your details[open] selectors don’t match on unsupporting browsers.

Which I suppose is what the question was about.

You could handle this behaviour (full CSS-based hide/show toggling on certain media queries only) by applying the ugly checkbox-hack though.

Paracetamol
  • 320
  • 3
  • 19
-6

You could achieve this with pure css using media queries. Here is a link to some examples http://www.techrepublic.com/blog/webmaster/how-to-create-media-queries-in-responsive-web-design/1789

Vortex
  • 663
  • 6
  • 7
  • Thanks, I use css media querys in all projects but in this particular case I don´t know how can modify the "open" attribute. It´s defined in the html code: `
    for closed and
    to show the content`
     – Swazy Mar 24 '13 at 11:43
  • Hmm instead of using js to change a class, again you could use pure css and use a media query to display:none or display:block an element. CSS has no way of changing code on a page, the only way to change an element's css class is JS. – Vortex Mar 24 '13 at 14:19
  • 2
    This answer doesn't respect the actual question which concerns the `
    ` element modes and if you can change them with CSS.
     – Paracetamol Feb 14 '19 at 11:54