Jquery slideToggle invité par un lien séparé sur la page

Question

J'essaie d'avoir un lien en haut de ma page ouvrir une section entre les en-têtes de mon site, l'en-tête (ou en-têtes) dans ce cas ont des ID et ceux-ci sont référencé dans les liens ('href = "# heading_3"'). Je voudrais utiliser jquery seulement dans ce but.

var _aTag = "a"; 
 
var _Header = "h3, h4"; 
 
$(document).ready(function(){ 
 
$(_aTag).click(function(){ 
 
\t \t $element = $(this); 
 
\t \t $elString = $element.attr('href'); 
 
\t \t $elString = $elString.substring(1); 
 
\t \t if ($element.attr('class') == 'ToCh') { 
 
     $header = document.getElementById($elString); 
 
\t  $content = $header.parent().nextUntil(_Header); 
 
     $content.slideToggle(); 
 
\t \t \t } 
 
    }); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="ToCh" href="#heading_3"> Test link</a> 
 
<h2 id="heading_2">Header W</h2> 
 
<p>Text</p> 
 
<h3 id="heading_3">Header X</h3> 
 
<p>Text</p> 
 
<h4 id="heading_4">Header Y</h4> 
 
<p>Text</p> 
 
<h4 id="heading_5">Header Z</h4> 
 
<p>Text</p>

Answer 1

Voici un exemple de code sur la façon de le faire:

$(document).ready(function(){ 
    $('a.ToCh').click(function(){ 
      var $element = $(this); 
      var linkString = $element.attr('href'); 
      var $content = $(linkString).next(); 

      $content.slideToggle(); 
     }); 
    }); 

Notez que je sélectionne un point d'ancrage avec la classe requise d'abord au lieu de vérifier plus tard dans le code . Notez également que pour sélectionner un élément par ID, vous devez appliquer # avant la chaîne de l'ID, il n'est donc pas nécessaire de le supprimer dans votre cas.