onclick of button使用jquery从accordion扩展第二个面板

Question

我是jquery的新手，我想在我点击next按钮时扩展手风琴的第二个面板。在窗口加载第二个面板折叠。这是片段

$(function(){
  $(".accordion > li").hover(
    function(){
      var $this = $(this);
      $this.stop().animate({"width": "480px"},500);
      $('.heading', $this).stop(true,true).fadeOut();
	  $('.bgDescription', $this).stop(true,true).slideDown(500);
      $('.description',$this).stop(true,true).fadeIn();
	  $('.heading1', $this).stop(true,true).fadeOut();
	  $('.description1',$this).stop(true,true).fadeOut();
    },
    function(){
      var $this = $(this);
      $this.stop().animate({"width": "115px"},1000);
      $('.heading', $this).stop(true,true).fadeIn();
      $('.bgDescription', $this).stop(true,true).slideUp(500);
      $('.description',$this).stop(true,true).fadeOut();
      $('.heading1', $this).stop(true,true).fadeOut();
	  $('.description1',$this).stop(true,true).fadeOut();

    }
  )
});


  $("input").click(function(){
  $("#panel").fadeOut();
  });

ul.accordion {
  list-style-type: none;
  position: relative;
  top: 150px;
  line-height: 1.5em;
}
ul.accordion1 {
  list-style-type: none;
  position: relative;
  top: 150px;
  line-height: 1.5em;
}

ul.accordion li {
  float: left;
  width: 115px;
  height: 240px;
  display: block;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 1px 3px 5px #555;
  -moz-box-shadow: 1px 3px 5px #555;
  box-shadow: 1px 3px 5px #555;
}
ul.accordion1 li {
  float: left;
  width: 115px;
  height: 240px;
  display: block;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 1px 3px 5px #555;
  -moz-box-shadow: 1px 3px 5px #555;
  box-shadow: 1px 3px 5px #555;
}

ul.accordion li.bg1 { background-image:url(images/download.jpg); }
ul.accordion1 li.bg2 { background-image:url(images/cats.jpg);}
ul.accordion li.bleft { border-left: 2px solid #fff; }
ul.accordion1 li.bleft { border-left: 2px solid #fff; }

ul.accordion li .heading {
  background: #fff;
  padding: 10px;
  margin-top: 60px;
  opacity: 0.9;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  color: #444;
  text-align: center;
  text-shadow: -1px -1px 1px #ccc;
}
ul.accordion1 li .heading1 {
  background: #fff;
  padding: 10px;
  margin-top: 60px;
  opacity: 0.9;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  color: #444;
  text-align: center;
  text-shadow: -1px -1px 1px #ccc;
}

ul.accordion li .description {
  position: absolute;
  width: 480px;
  height: 175px;
  bottom: 0;
  left: 0;
  display: none;
}
ul.accordion1 li .description1 {
  position: absolute;
  width: 480px;
  height: 175px;
  bottom: 0;
  left: 0;
  display: none;
}

ul.accordion li .description h2 {
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 45px;
  color: #444;
  text-align: left;
  margin: 0 0 15px 20px;
  text-shadow: -1px -1px 1px #ccc;
}
ul.accordion1 li .description1 h2 {
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 45px;
  color: #444;
  text-align: left;
  margin: 0 0 15px 20px;
  text-shadow: -1px -1px 1px #ccc;
}

ul.accordion li .description p {
  line-height: 14px;
  margin: 10px 22px;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.6em;
}
ul.accordion1 li .description1 p {
  line-height: 14px;
  margin: 10px 22px;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.6em;
}

ul.accordion li .description a {
  position: absolute;
  bottom: 5px;
  left: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #888;
}
ul.accordion1 li .description1 a {
  position: absolute;
  bottom: 5px;
  left: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #888;
}

ul.accordion li .description a:hover {
  color: #333;
  text-decoration: underline;
}
ul.accordion1 li .description1 a:hover {
  color: #333;
  text-decoration: underline;
}

ul.accordion li .bgDescription {
  background: linear-gradient(0deg, #fff 40%, rgba(255,255,255,0));
  height: 340px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  display: none;
}
ul.accordion1 li .bgDescription1 {
  background: linear-gradient(0deg, #fff 40%, rgba(255,255,255,0));
  height: 340px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="accordion" id="accordion">
  <li class="bg1">
    <div class="heading">Heading</div>
    <div class="bgDescription"></div>
    <div class="description">
      <h2>Heading 1</h2>
      <p>Description 1</p>
       <input type="submit" value="next" id="accordian1()"></div>
  </li>
</ul>

<ul class="accordion1" id="panel">
  <li class="bg2" id="bg2">
    <div class="heading1">Heading2</div>
    <div class="bgDescription1"></div>
    <div class="description1">
      <h2>Heading 2</h2>
      <p>Description 2</p>
       <a href="#">Read more</a> </div>
  </li>
</ul>