Open <details> element when window width => 768px

Question

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

Answer 1

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

Answer 2

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.