Toggle, fade in, fade out. Open slider and change content
Question
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, ...
1 answers
solution1
1 ACCPTED 2016-12-20 12:58:08
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.