Search code examples
javascripttogglefadeinfadefadeout

Toggle, fade in, fade out. Open slider and change content

As a js noob, I'm fighting a struggle width the load of content in a slider. I have 4 buttons. When clicking a button, I want a slider to open and content to fade in. When I click another button, I want the slider to stay open but content needs to fade out and new content to fade in.

I have this:

HTML

    <div class="standorte-wrapper">
     <div class="panel left">
       <div class="pan-item tl">
        <button href="#" id="expand" class="show-hide">TOGGLE</button>
       </div><!--
       --><div class="pan-item tr">
       <button></button>
       </div><!--
       --><div class="pan-item bl">
       <button></button>
       </div><!--
       --><div class="pan-item br">
       <button></button>
       </div>
   </div>
   <div class="panel right">
    <div class="close-button">
        <a href="#" id="close" class="close">
         <i class="icon-cancel"></i></a>
    </div>
    <h2>Everything you need to know</h2><!-- CONTENT TO REFRESH -->
    </div>
    </div>

JS

$(document).ready(function(){
    $("#expand").on("click", function(){
        $(".standorte-wrapper").toggleClass("expand");
    });

    $("#close").on("click", function(){
        $(".standorte-wrapper").toggleClass("expand");
    });
});

That gives me this result, opening and clossing Working Toggle

How can I add the functions I wish as written on top? De content I load in the panel are .php files. file1.php, file2.php, ...

Solution

  • After our collaboration on Github I post here what we did so far

    https://github.com/neodev2/ajax-slide-panel

    <!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.12.4.min.js">
    </script>
    <script>
        $(document).ready(function(){

            var ajaxUrls = [
                'snip1.html',
                'snip2.html',
                'snip3.html',
                'snip4.html'
            ];

            var ajaxFiles = [];


            for(var i=0; i<ajaxUrls.length; i++){

                $.ajax({
                    method: 'GET',
                    url: ajaxUrls[i],
                    success: function(data){
                        //console.log(data);
                        ajaxFiles.push(data);
                    }
                });

            }

            $('.pan-item > button').on('click', function(){

                if($('.panel.left').hasClass('open')){
                    //alert('already open');
                }else{
                    $('.panel.left').addClass('open');
                    $('.standorte-wrapper').addClass('expand');
                }

                $('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]);

            });


            $('#close').on('click', function(){

                $('.panel.left').removeClass('open');
                $('.standorte-wrapper').removeClass('expand');

            });

        });
    </script>
    <title></title>
</head>
<body>
    <div class="standorte-wrapper">
        <div class="panel left">
            <div class="pan-item tl">
                <button data-ajaxfile="0">X</button>
            </div>
            <div class="pan-item tr">
                <button data-ajaxfile="1">X</button>
            </div>
            <div class="pan-item bl">
                <button data-ajaxfile="2">X</button>
            </div>
            <div class="pan-item br">
                <button data-ajaxfile="3">X</button>
            </div>
        </div>
        <div class="panel right">
            <div class="close-button">
                <a class="close" href="#" id="close"><i class="icon-cancel">X</i></a>
            </div>
            <div>
                <h2>Everything you need to know</h2>
                <div id="php-content"></div>
            </div>
        </div><span class="clear"></span>
    </div>
</body>
</html>