CODEWITHSUNDEEP
javascriptjquerycss
user3886632
user3886632

Reputation: 87

Convert Divs into accordion upon resizing

I have 5 divs next to each other in the desktop view. However, upon resizing to ~640px, these divs should condense into an accordion.

Any ideas or tips on how to accomplish this?

Example >

(On desktop)

| DIV#1 | DIV#2 | DIV#3 | DIV#4 |

(On mobile, at 640px)

–––––––––––
Accordion +
–––––––––––
DIV#1
DIV#2
DIV#3
DIV#4
–––––––––––

Upvotes: 2

Views: 2951

Answers (2)

K K
K K

Reputation: 18099

You can use css media query alongwith js:

HTML

<div class="accordion">+</div>
<div class="a">A</div>
<div class="a">B</div>
<div class="a">C</div>
<div class="a">D</div>
<div class="a">E</div>

CSS:

/* Smartphones (portrait and landscape) ----------- */
 @media only screen and (max-width : 640px) {
    /* Styles */
    div {
        display:block;
        padding:10px;
        border:1px solid #544454;
        margin:5px
    }
    .a {
        display:none;
    }
}
/* Desktops and laptops ----------- */
 @media only screen and (min-width : 641px) {
    /* Styles */
    .accordion {
        display:none;
    }
    .a {
        display:inline-block;
        margin:10px;
        width:80px;
        height:40px;
        border:1px solid green;
    }
}

JS:

$(document).ready(function () {
    $('.accordion').on('click', function () {
        $('.a').slideToggle('fast');
    });
});

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/335/

Re-size the window to see the effects. Adjust the media query value according to your needs

Upvotes: 4

snehatulsi
snehatulsi

Reputation: 247

try this. listn to window resizing, if height goes below 640, write the jquery/JS code to convert it to accordion.

$(window).on('resize', function() {
                if(window.innerHeight < 640)
                    //change it to accordion here
            });

Upvotes: 1

Related Questions