Bascule, fondu, fondu. Ouvrez le curseur et changez le contenu

En tant que js noob, je me bats un peu plus la charge de contenu dans un curseur. J'ai 4 boutons. Lorsque je clique sur un bouton, je souhaite qu'un curseur s'ouvre et que le contenu apparaisse. Lorsque je clique sur un autre bouton, le curseur doit rester ouvert mais le contenu doit disparaître et le contenu disparaître.Bascule, fondu, fondu. Ouvrez le curseur et changez le contenu

J'ai cette :

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>

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

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

Cela me donne ce résultat, ouverture et clossing

Comment puis-je ajouter les fonctions que je souhaite comme écrit au sommet? De contenu que je charge dans le panneau sont des fichiers .php. file1.php, file2.php, ...

Source

2016-12-19 user3799112

Après notre collaboration sur Github Je poste ici ce que nous avons fait jusqu'à présent

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>

Source

2016-12-20 12:58:08 neoDev

Bascule, fondu, fondu. Ouvrez le curseur et changez le contenu

Répondre

Questions connexes