折叠uncollapse javascript三行

Question

嗨，有人可以帮助我如何根据我选择的行更改加号到减号，我设法从加号变为零号，但现在它正在改变所有这些而不是我点击的那个。

嗨，有人可以帮助我如何根据我选择的行更改加号到减号，我设法从加号变为零号，但现在它正在改变所有这些而不是我点击的那个。

＆＃13;

＆＃13;

re.search(r'"[A-Z].+"$', str(q), re.MULTILINE)

＆＃13;

ipt type="text/javascript">
       $(document).ready(function() {
  $('.collapse.in').prev('.panel-heading').addClass('active');

  $('#accordion, #bs-collapse')
    .on('show.bs.collapse', function(a) { 

     $(this).find('.add').hide();    
        $(this).find('.remove').show();
      $(a.target).prev('.panel-heading').addClass('active');
    })
    .on('hide.bs.collapse', function(a) {
          $('.add').show();    
        $('.remove').hide();
      $(a.target).prev('.panel-heading').removeClass('active');
    });
});

＆＃13;

.panel {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #fff;
  background: none;
  box-shadow: none;
}

.panel:last-child {
  border-bottom: none;
}

.panel-group > .panel:first-child .panel-heading {
  border-radius: 4px 4px 0 0;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-group .panel + .panel {
  margin-top: 0;
}

.panel-heading {
  background-color: white;
  border-radius: 0;
     color: #f8971c;
    border-top: 1px solid #dedede;
    border-radius: 0!important;
  padding: 0;
}

.panel-title a {
  display: block;
  padding: 40px;
 font-family: Roboto;
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
  color: #f89921;
}
.panel-title{
         margin-bottom: 0;
}

.panel-body {
  background: #fff;
}

.panel:last-child .panel-body {
  border-radius: 0 0 4px 4px;
}

.panel:last-child .panel-heading {
  border-radius: 0 0 4px 4px;
  transition: border-radius 0.3s linear 0.2s;
}

.panel:last-child .panel-heading.active {
  border-radius: 0;
  transition: border-radius linear 0s;
}
/* #bs-collapse icon scale option */

.panel-heading a:before {
  content: '\e146';
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  font-size: 24px;
  transition: all 0.5s;
  transform: scale(1);
}

.panel-heading.active a:before {
  content: ' ';
  transition: all 0.5s;
  transform: scale(0);
}

#bs-collapse .panel-heading a:after {
  content: ' ';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  transform: scale(0);
  transition: all 0.5s;
}

#bs-collapse .panel-heading.active a:after {
  content: '\e909';
  transform: scale(1);
  transition: all 0.5s;
}
/* #accordion rotate icon option */

#accordion .panel-heading a:before {
  content: '\e316';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  transform: rotate(180deg);
  transition: all 0.5s;
}

#accordion .panel-heading.active a:before {
  transform: rotate(0deg);
  transition: all 0.5s;
}
.remove{
display:none;
}

＆＃13;

＆＃13;

＆＃13;

请在这里提供任何帮助，当我点击一行或面板时，如果加号变为负数，我该如何制作，但仅限于该行。我不知道是否有人理解我想说的话。

Answer 1

我...也许知道你遇到了什么。让我为你举个例子。

单击控制按钮隐藏行，然后再次单击以显示该行。

＆＃13;

＆＃13;

$(".row .controlBtn").click(function(){
    var btn = $(this);
    var elem_row = btn.parent().parent();
    var elem_rowContent = elem_row.find(".rowContent");
    var display_status = elem_rowContent.css("display");
    if(display_status == "none"){
        //Show
        btn.text("Hide");
        elem_rowContent.css("display", "block");
    }else{
        //Hide
        btn.text("Show");
        elem_rowContent.css("display", "none");
    }
});

＆＃13;

div{
    border: 1px solid #000;
    margin: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="row1" class="row">
  <div class="rowPanel">
    <span class="controlBtn">Hide</span>
  </div>
  <div class="rowContent">
    <p>This is row 1 content</p>
  </div>
</div>
<div id="row2" class="row">
  <div class="rowPanel">
    <span class="controlBtn">Hide</span>
  </div>
  <div class="rowContent">
    <p>This is row 2 content</p>
  </div>
</div>
<div id="row3" class="row">
  <div class="rowPanel">
    <span class="controlBtn">Hide</span>
  </div>
  <div class="rowContent">
    <p>This is row 3 content</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;