javascript - Responsive design for display:none -

any appreciated, cant work out.

i have list of information contained within seperate div

on page load title of each div showing.

<div class='listing' >      <a href="#" onclick="toggle_visibility('interactive');">    <h3 class='title'>title</h3> </a>      <div id="interactive" style="display:none;">       <div class="web"><p><a href="#">#</a></p></div>       <div class="phone"><p><a href="tel:#">tel: #</a></p></div>       <div class="email"><p><a href="#">#</a></p></div>       <p>copy: ipsum blah </p>       <p>blah blah</p>     </div>   

function toggle_visibility(id) {    var e = document.getelementbyid(id);    if(e.style.display == 'block')       e.style.display = 'none';    else       e.style.display = 'block'; } 

onclick toggles visibility of content. far good.

say start add simple responsive design. if on small screen want 1 column of div, no problem. if wider make media query adjust width of div accordingly.

say have 2 columns. if onclick toggle visibility of course still shows content in 4 column responsive layout. want unhidden content revert full width (might lot of content, , looks strange extend down half column). need onclick toggle visibility div full screen width.

can in css? i've tried styling 'revealed' div no joy.

any pointers welcome???!!!! im sure easy ive tried , im still learning this!

i recommend avoiding using javascript change style directly whenever possible. classes better this, , let things customize styling via media queries, animating content changes.

first, change html use class rather hard style:

<div id="interactive" class="listing-item"> 

next, change js toggle class, rather change style directly:

function toggle_visibility(id) {    var e = document.getelementbyid(id);   // note: classlist ie10+, might have more work   // support older browsers    e.classlist.toggle('visible'); } 

finally, use css handle magic:

.listing-item {     display: none; } .listing-item.visible {     display: block; }  @media (...) {     .listing-item.visible {         ...     } } 

if want fancy, try css3 styling:

.listing-item {     overflow: hidden;     max-height: 0;     transition: 0.2s ease-in-out; } .listing-item.visible {     // pick reasonable here, make sure     // content visible.  high, , animation off.     max-height: 999px;     overflow: visible; }