Javascript 交换图标以显示相关的展开或折叠

我有一些代码可以解释和折叠内容。这段代码最初将标题替换为Expand/Collapse（在下面注释掉），但我想要的是一个与唯一h2标记相关的图像或文本（+/-）

剧本是：

$(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    //$header.text(function () {
        //change text based on condition
        //return $content.is(":visible") ? "-" : "+";
    //});
});
});

内容看起来像

<div class="header">
      <h2>The Role</h2>
      </div>
<div class="content">
      <?php the_field('the_role')?>
</div>
<div class="header">
      <h2>Your Experience</h2>
      </div>
<div class="content">
      <?php the_field('your_experience')?>
</div>

角色
你的经历

---

希望这有意义。

如果我理解你的问题，我想这就是你想要的：

HTML:

CSS:

---

来解决您当前的问题。这会管用的

$(function() {
$('.header').each(function() {
   if( $(this).next('div.content').length > 0 ) {
       $(this).prepend('<img src="collapsed.png" class="collapser" />');
   }
});
});

$(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed

$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    //$header.text(function () {
        //change text based on condition
          if( $content.is(":visible") ) {
            $header.find('.collapser').attr('src','collapsed.png');
           } else {
             $header.find('.collapser').attr('src','expanded.png');
           }
        //return $content.is(":visible") ? "-" : "+";
    //});
});
});

$（this）.text（）将获取可以修改的标题文本。

$(".header").click(function () {

    var $header = $(this),
        $span = $header.find(">:first-child"),
    //getting the next element
        $content = $header.next();
    //open up the content needed
    $content.slideToggle(500)

    if ($span.text() == "-")
        $span.text("+")
    else {
        $span.text("-")
    }
});

.header > span {
    float:left;
    width:20px

}

$(function() {
$('.header').each(function() {
   if( $(this).next('div.content').length > 0 ) {
       $(this).prepend('<img src="collapsed.png" class="collapser" />');
   }
});
});

$(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed

$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    //$header.text(function () {
        //change text based on condition
          if( $content.is(":visible") ) {
            $header.find('.collapser').attr('src','collapsed.png');
           } else {
             $header.find('.collapser').attr('src','expanded.png');
           }
        //return $content.is(":visible") ? "-" : "+";
    //});
});
});

<div class="accordio">
    <div class="header">
        <img src="collapsed.png" class="collapser" />
          <h2>The Role</h2>
     </div>
    <div class="content">
          ss
    </div>
</div>
<div class="accordio">
    <div class="header">
          <img src="collapsed.png" class="collapser" />
          <h2>Your experience</h2>
    </div>
    <div class="content">
          ss
    </div>
</div>

$(".accordio .header").click(function () {
$header = $(this);
$content = $header.parent().find('.content');
$content.slideToggle(500, function () {
          if( $content.is(":visible") ) {
            $header.find('.collapser').attr('src','collapsed.png');
           } else {
             $header.find('.collapser').attr('src','expanded.png');
           }
});
});