MG Space - A Responsive Google Images Inspired Accordion

MG Space is a responsive jQuery Google images inspired accordion plugin. http://mad-genius.github.io/mg-space/

Getting Started

Basic markup.

    <div class="mg-space-init">
        <div class="mg-rows">
            <div>
                <a href="#" title="trigger element" class="mg-trigger"></a>
            </div>
            <div>
                <a href="#" title="trigger element" class="mg-trigger"></a>
            </div>
            <div>
                <a href="#" title="trigger element" class="mg-trigger"></a>
            </div>
            ...
        </div>
        <div class="mg-targets">
            <div></div>
            <div></div>
            <div></div>
            ...
        </div>        
    </div>

In a basic scenario, you just need to import mg-space.css, jquery, jquery.mg-space.js and call the mgSpace() function on the wrapper containing .mg-rows and .mg-targets. The trigger mg-trigger does not have to be a link, but it does have to be inside a child of .mg-rows as shown.

    <link rel="stylesheet" href="mg-space.css">
    ...
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="jquery.mg-space.js"></script>
    <script>
        $(function(){
            $('.mg-space-init').mgSpace();
        });
    </script>

Demo

You can view a few demo examples using mgSpace here.

Licence

Copyright (c) 2011-2012 Bryce Mullican. Licensed under the MIT license. (https://github.com/Mad-Genius/mg-space/blob/master/MIT-LICENSE.txt)