generic opener DEV 0.1

by moob

HTML

<h1>Generic opener</h1>
<p>Vestibulum id ligula porta felis euismod semper. <a href="#test1" data-target-visibility='slideToggle' >Toggle #test1</a> Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.<p>
    
    <p>Any <code>link</code> with a <code>data-target-visibility</code> can be open/closed/toggled depending on the data-target-visibility value.<br />
        <code>slideToggle</code> = toggle visibility using a slide animation<br />
        <code>slideDown</code> = initially closed, slides open on click, will not close<br />
        <code>slideUp</code> = initially open, slides closed on click, will not open<br />
    </p>
    <p>
        <code>data-target-visibility='{[open|close|toggle],[slide|fade|collapse],[fast|slow|pps]}'</code><br />
        <a href="#test2" data-target-visibility="toggle,slide,200">&lt;a href="#test2" data-target-visibility="toggle,slide,200"&gt;</a>
    </p>      
        
<div id="test1">
    I'm only opened when you click on an link with the attribute data-opens="test1".<br />
    <a href="#test1" data-target-visibility='slideUp'>close me</a>
</div>
    
    
    <div id="test2">
    I'm test two
</div>
    
    
    <h4>Anchored link toggler:</h4>
    <ul>
        <li><a href="#i3" data-target-visibility='slideToggle'>3 asdas</a></li>
        <li><a href="#i4" data-target-visibility='slideToggle'>4 asdas</a></li>
        <li><a href="#i5" data-target-visibility='slideToggle'>5 asdas</a></li>
    </ul>        
    <div id="i3">#i3 here</div>
    <div id="i4">#i4 here</div>            
    <div id="i5">#i5 here</div>
    
    
    <h4>Regular Accordion?</h4>
    <ul>
        <li>
            <a href="" data-opens-child>asdas</a>
            <div>#3 here</div>
        </li>
        <li><a href="#4">asdas</a></li>
        <li><a href="#5">asdas</a></li>
    </ul>
        
    
    <div>#4 here</div>            
    <div>#5 here</div>

    
    <hr />
    
    
   ...

CSS

#test1 {display:block; background-color:#ccc; padding:20px;}
#test2 {display:block; background-color:#ccc; padding:20px;}

JavaScript

/* DEV */
(function ($) {
    
    
    $.fn.targetOpener = function (options) {
        var settings = $.extend({
            animation: 'slide',
            speed:600, //PixelsPerSecond
            complete: null //function callback on complete
        }, options);
        

        
        return this.each(function () {
            
            var trigger = $(this),
                target = $(""+trigger.attr("href")),
                tv = trigger.data("target-visibility"),
                action = 'single',
                animation = 'none',
                toggle=false,
                open=false;
            
            console.log(tv);
            
            
                    
            
            var stngs = tv.split(",");
            console.log(stngs);
            
            /*            */
            if(tv.indexOf('Toggle')>0){
                action = 'toggle';
                toggle = true;
            }
            
            animation = tv.replace('Toggle','');
            //console.log(action,animation);
            
            target.hide();
            
            trigger.on('click', function(){
                //if action contain 'toggle'
                open = target.is(':visible');
                if(toggle){
                    if(open){
                        if(animation=='slide'){
                            target.slideUp();
                        } else {
                            target.hide();
                        }
                        open=false;
                    } else {
                        if(animation=='slide'){
                            target.slideDown();
                        } else {
                            target.show();
                        }
                        open=true;
                    }
                } else {
                    target[animation]();
                }
                return false;
            })

            
        });
        
  ...