generic opener DEV 0.2

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="">asdas</a><div>#3 here</div></li>
        <li><a href="">asdas</a><div>#4 here</div> </li>
        <li><a href="">asdas</a><div>#5 here</div></li>
    </ul>
        
    
               
    

    
    <hr />
    
    <!--<div class="anewsitem">
        <h1>a news item</h1>
       ...

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 zis = $(this),
                standardTriggers = $("[data-target-visibility]"),
                childTogglers = $("[data-open-me],[data-close-me],[data-toggle-me]");
            
            
            /* standard triggers - open/closes/toggles matched children by id */
            standardTriggers.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();
                            }
          ...