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