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

Question

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

310 Views Asked by user3799112 At 04 April 2025 at 05:50

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

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, ...

Original Q&A

There are 1 best solutions below

**neoDev** · Accepted Answer

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>

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in TOGGLE

Related Questions in FADEIN

Related Questions in FADE

Related Questions in FADEOUT

Trending Questions

Popular # Hahtags

Popular Questions