vue 原生多个上下箭头来回切换，并且内容显示隐藏

多个上下箭头来回切换，并且内容显示隐藏
直接上代码
html

 <div v-for="(item, index) in help" :key="index">
         <div class="helpQuestionsFirst">
         <div class="helpQuestions">{{ item.helpQuestions }}</div>
        <div class="helpQuestionsImg" @click="helpQuestionsImgClick(item.id)">
          <img v-if="item.imgPage" src="../../assets/images/home/home-right.png"     alt="" />
            <img v-else src="../../assets/images/home/home-top.png" alt="" />
       </div>
    </div>
     <div v-if="item.imgPage" class="helpAnswer">
        <p>{{ item.helpAnswer }}</p>
        
        </div>
  </div>

css

      .helpQuestionsFirst{
 display: flex;
 justify-content: space-between;
align-items: center;
width: 345px;
height: 48px;
margin: 0 auto;
. helpQuestions{
 height: 23px;
font-size: 16px;
font-weight: 400;
color: #333333;
line-height: 23px;
}
.helpQuestionsImg{
 width: 16px;
 height: 16px;
 img{
   width: 100%;
   height: 100%;
 }
}
}
 .helpAnswer{
width: 345px;
background: #FAFAFA;
margin:  0 auto;
p{
width: 315px;
font-size: 15px;
 font-weight: 400;
color: #666666;
text-align: left;
margin: 0 auto;
padding: 13px 0;

 }
   }

js
data 里面定义

 help:[
      {
          id:1,
        helpQuestions:'什么是网上开户？',
        helpAnswer:'通过网上开户，客户（目前仅中国籍自然人）不需要再到营业部现场，通过互联网即可向我公司申请办理开立资金账户、证券账户和开通三方存管等业务。',
        imgPage:false,
    },
    {
        id:2,
      helpQuestions:'什么是网上开户？',
      helpAnswer:'通过网上开户，客户（目前仅中国籍自然人）不需要再到营业部现场，通过互联网即可向我公司申请办理开立资金账户、证券账户和开通三方存管等业务。',
      imgPage:false,
  },
  {
    id:3,
  helpQuestions:'什么是网上开户？',
  helpAnswer:'通过网上开户，客户（目前仅中国籍自然人）不需要再到营业部现场，通过互联网即可向我公司申请办理开立资金账户、证券账户和开通三方存管等业务。',
  imgPage:false,
 },
  {
id:4,
 helpQuestions:'什么是网上开户？',
 helpAnswer:'通过网上开户，客户（目前仅中国籍自然人）不需要再到营业部现场，通过互联网即可向我公司申请办理开立资金账户、证券账户和开通三方存管等业务。',
 imgPage:false,
 },
 {
id:5,
helpQuestions:'什么是网上开户？',
 helpAnswer:'通过网上开户，客户（目前仅中国籍自然人）不需要再到营业部现场，通过互联网即可向我公司申请办理开立资金账户、证券账户和开通三方存管等业务。',
imgPage:false,
 },
  ],