网站上经常会用到各种不同风格的切换组件，特别是在企业官网上，今天VOKO的前端工程师用jQuery来实现一个信息切换展示的效果，可以根据公司实际需要来展示不同的内容，如企业分公司的相关信息，用这款就很合适。
HTML
<!-- start: region -->
<div class="region">
<ul>
<li>
<div class="inner">
<h3><span>Beijing</span><i></i></h3>
<section>
<div class="t_i">
<div class="text">
<p>
Our bright Beijing office in Sanlitun SOHO features multiple communication spaces, a large model workshop, and a multi-purpose gallery.
</p>
<p>
<span>
8 Gongti North Road, Sanlitun SOHO <br/>
Beijing<br/>
100027
</span>
<span>
<a class="btn" href="#">+86(10)6029 4517</a>
<a class="btn" href="#">View Map</a>
</span>
</p>
</div>
<div class="img"><i></i></div>
</div>
</section>
</div>
</li>
<li class="t_start t_anim delay3">
<div class="inner">
<h3><span>Shanghai</span><i></i></h3>
<section>
<div class="t_i">
<div class="text">
<p>
Our Shanghai Office is located in the historic Shun Pao Building near the Bund. Established in 2020, it offers complete design services for projects throughout China.
</p>
<p>
<span>
Unit 206 Hankou Road<br/>
Shanghai<br/>
200001
</span>
<span>
<a class="btn" href="#">+86(21)6200 0987</a>
<a class="btn" href="#">View Map</a>
</span>
</p>
</div>
<div class="img"><i></i></div>
</div>
</section>
</div>
</li>
<li class="t_start t_anim delay5">
<div class="inner">
<h3><span>Shenzhen</span><i></i></h3>
<section>
<div class="t_i">
<div class="text">
<p>
Since 2022, our Shenzhen office services a growing number of projects in the city and the Greater Bay Area.
</p>
<p>
<span>
No. 18 Zimao West Street, Qianhai<br/>
Shenzhen<br/>
518000
</span>
<span>
<a class="btn" href="#">+86(10)7642 0028</a>
<a class="btn" href="#">View Map</a>
</span>
</p>
</div>
<div class="img"><i></i></div>
</div>
</section>
</div>
</li>
</ul>
</div>
<!-- end: region -->
CSS
/* region */
.region {padding:150px 40px;}
.region ul {}
.region li {position:relative; padding:40px; border-top:2px solid #000000;}
.region li::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:0; background:#000000; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.region li .inner {overflow:hidden;}
.region li h3 {position:relative; z-index:2; font-size:100px; display:flex; justify-content:space-between; align-items:center;}
.region li h3 span {display:inline-block; position:relative; z-index:1; width:calc(100% - 60px); transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.region li h3 i {display:block; width:40px; height:40px; position:relative; right:-10px; top:50%; transition: all 0.3s ease-out 0s;}
.region li h3 i:before {content:""; position:absolute; z-index:1; left:0; right:0; top:0; bottom:0; margin:auto; width:14px; height:3px; background:#000000; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.region li h3 i:after {content:""; position:absolute; z-index:1; left:0; right:0; top:0; bottom:0; margin:auto; width:3px; height:14px; background:#000000; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.region li h3 i.arrow_rotate {transform:rotate(45deg);}
.region li section {height:0; transition:all 0.3s ease 0s;}
.region li section .t_i {width:100%; height:0; display:flex; justify-content:space-between; align-items:flex-end; transition:height 1s ease 0s; -moz-transition:height 1s ease 0s; -webkit-transition:height 1s ease 0s;}
.region li section .text {width:50%; opacity:0; position:relative; z-index:1; margin-top:60px; padding:0 40px 0 0; transform:translateY(-20px); transition:none;}
.region li section .text p {font-size:32px; line-height:1.4;}
.region li section .text p:nth-child(2) {display:flex; flex-wrap:wrap; margin-top:40px; padding:20px; font-size:18px; color:#000000; line-height:1.6; background:#FFFFFF;}
.region li section .text p:nth-child(2) span {width:50%;}
.region li section .text p:nth-child(2) span:nth-child(2) {display:flex; flex-direction:column; align-items:flex-end; justify-content:space-around;}
.region li section .text p:nth-child(2) span:nth-child(2) a {font-weight:bold; color:#000000;}
.region li section .img {position:relative; width:50%; opacity:0; position:relative; z-index:2; transition:all 0.3s ease 0s;}
.region li section .img i {display:block; width:100%; position:absolute; left:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.region li section .img i::after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000000; transition:all 1s ease 0.5s;}
.region li:nth-child(1) section .img i {background-image:url('region_1.png');}
.region li:nth-child(2) section .img i {background-image:url('region_2.png');}
.region li:nth-child(3) section .img i {background-image:url('region_3.png');}
/* is_hover */
.region li.is_hover::after {height:100%;}
.region li.is_hover h3 span {color:#FFFFFF;}
.region li.is_hover h3 i:before,
.region li.is_hover h3 i:after {background:#FFFFFF;}
/* is_open */
.region li.is_open::after {height:100%;}
.region li.is_open h3 {background:#000000;}
.region li.is_open h3 span {color:#FFFFFF;}
.region li.is_open section {}
.region li.is_open section .text {opacity:1; color:#FFFFFF; transform:translateY(0); transition:all 1s ease 0.5s;}
.region li.is_open section .img {opacity:1; transition:all 0s ease 0.5s;}
.region li.is_open section .img i::after {transform:translateY(100%);}
JavaScript
// region
function fun_region_zoom() {
var li = $('.region li');
var h3 = $('.region li h3');
var section = $('.region li section');
var t_i = $('.region li section .t_i');
var img = $('.region li section .img');
var i = $('.region li section .img i');
//
t_i.css({
"height":i.width()*0.75 - h3.height()
});
i.css({
"height":i.width()*0.75,
});
//
li.hover(function(){
$(this).addClass('is_hover');
},function(){
$(this).removeClass('is_hover');
});
//
li.click(function (event) {
// 收起
if ($(this).hasClass('is_open')) {
$(this).removeClass("is_open");
section.css({"height":0});
}
// 展开
else {
li.removeClass("is_open");
$(this).addClass("is_open");
section.css({"height":0});
$(this).find('section').css({"height":i.width()*0.75 - h3.height()});
}
});
}
//
fun_region_zoom ();
$(window).bind('resize', function (){
fun_region_zoom();
});