Удалить текст ссылки на div развал?

Question

Этот код ниже используется для скрытия и отображения div, но как мы можем удалить текст ссылки "Поиск" при нажатии и вместо этого отобразить знак минус?

<div class="expandContent"><a href="#" title="Click here to search."> &nbsp; &nbsp; 
    <i class='icon-search' title='Click here to search.'></i> SEARCH </a>
</div>
<div class="showMe" style="display:none">

<script type="text/javascript">
$('.expandContent').click(function(){
        $('.showMe').slideToggle('slow');
    });
    </script>

Answer 1

Если я правильно понял, похоже, вы хотите переключать результаты поиска с помощью значка. Я использовал аналогичный подход, используя элемент <button> (вместо элемента привязки).

+ и - внутри элемента кнопки переключаются с помощью jQuery 'text() вместе с условный троичный оператор :

$('.btn-search').click(function() {
  $(this).text() === '+' ?  $(this).text('-') : $(this).text('+');
  $('.showMe').slideToggle('slow');
});

.showMe {
  border: 2px solid crimson;
  padding: 10px;
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-search">+</button>

<div class="showMe" style="display:none">
  <p>Search results go here...</p>
</div>

Answer 2

Вот еще один способ показать / скрыть элемент, но с использованием подхода CSS, который точно быстрее, чем javascript. Вы можете установить значение контента, которое вы хотите sh из UNICODE

$('.expandContent').click(function(){
        $('.showMe').slideToggle('slow');
        $(this).toggleClass('collapsed');
    });

.showMe {
   display:none;
}
.expandContent {
  cursor: pointer;
}
.expandContent:before {
    content: '\1f50d SEARCH';
}
.expandContent.collapsed:before {
    content: '\2192';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="expandContent" title="Click here to search."></div>
<div class="showMe">showMe</div>

Answer 3

вы можете изменить html внутри тега a, используя jquery

      <div class="expandContent" id="expandContent">
  <a href="#" title="Click here to search.">
    &nbsp; &nbsp;
    <i class="icon-search" title="Click here to search."></i>
    <span id="toggleText">SEARCH</span>
  </a>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $(".expandContent").click(function() {
      $(".showMe").slideToggle("slow");
      if ($("#toggleText").text() === "SEARCH") {
        $(".expandContent a").html(` &nbsp; &nbsp;
<i class="icon-search" title="Click here to search."></i><span id="toggleText">&#45;</span>`);
      } else {
        $(".expandContent a").html(` &nbsp; &nbsp;
<i class="icon-search" title="Click here to search."></i><span id="toggleText">SEARCH</span>`);
      }
    });
  });
</script>