javascript - Bootstrap 4-column row -- columns 3 and 4 are pointing to columns 1 and 2 on expand

Question

I'm having trouble with my HTML (and possibly the associated JQuery?) on a page. The below section is basically a list of employees, and you can click the link to expand each one, which then displays a dropdown with a description of the employee.

The problem is that, when you click on the name for employee "NAME3", it switches to NAME1's icon and description; and when you click on "NAME4", it switches to NAME2's icon and description.

  <div class="container-narrow">
    <h2>TEAM</h2>
    <p style="margin-bottom:40px;">CONTENT</p>
  </div>
  <!-- <h3>HEADING</h3> -->
  <div class="container">
    <div class="row justify-content-center">


      <div class="col-md-3">
        <div class="item-wrapper">
          <a href="#" class="wrapper-toggle-left">
            <img src="<?php echo get_template_directory_uri() .
              "/img/team/NAME1.jpg"; ?>" class="rounded-circle" alt="NAME1">
          </a>
          <a href="#" class="wrapper-toggle-left">
            <h4>NAME1</h4>
          </a>
          <p>TITLE</p>
          <b>INFO</b></a>
        </div>
      </div>
      <div class="team-collapse-wrapper" id="toggle-content-left">
         <div class="">
           <div class="collapse-content">
             <div class="collapse-header">
               <h2>NAME2</h2>
               <p>INFO</p>
             </div>
             <div class="row justify-content-center">
               <div class="col-12 col-md-8">
                 <p style="padding:30px;">DESCRIPTION</p>
               </div>
             </div>
           </div>
         </div>
       </div>



      <div class="col-md-3">
        <div class="item-wrapper">
          <a href="#" class="wrapper-toggle-right">
            <img src="<?php echo get_template_directory_uri() .
              "/img/team/NAME2.jpg"; ?>" class="rounded-circle" alt="NAME2">
          </a>
          <a href="#" class="wrapper-toggle-right">
            <h4>NAME2</h4>
          </a>
          <p>TITLE</p>
          <b>INFO</b></a>
        </div>
      </div>
      <div class="team-collapse-wrapper" id="toggle-content-right">
         <div class="">
           <div class="collapse-content">
             <div class="collapse-header">
               <h2>NAME2</h2>
               <p>INFO</p>
             </div>
             <div class="row justify-content-center">
               <div class="col-12 col-md-8">
                 <p style="padding:30px;">DESCRIPTION</p>
               </div>
             </div>
           </div>
         </div>
       </div>



      <div class="col-md-3">
        <div class="item-wrapper">
          <a href="#" class="wrapper-toggle-left">
            <img src="<?php echo get_template_directory_uri() .
              "/img/team/NAME3.jpg"; ?>" class="rounded-circle" alt="NAME3">
          </a>
          <a href="#" class="wrapper-toggle-left">
            <h4>NAME3</h4>
          </a>
          <p>TITLE</p>
          <b>INFO</b></a>
        </div>
      </div>
      <div class="team-collapse-wrapper" id="toggle-content-left">
        <div class="">
          <div class="collapse-content">
            <div class="collapse-header">
              <h2>NAME3</h2>
              <p>INFO</p>
            </div>
            <div class="row justify-content-center">
              <div class="col-12 col-md-8">
                <p style="padding:30px;">DESCRIPTION</p>
              </div>
            </div>
          </div>
        </div>
      </div>




      <div class="col-md-3">
        <div class="item-wrapper">
          <a href="#" class="wrapper-toggle-right">
            <img src="<?php echo get_template_directory_uri() .
              "/img/team/NAME4.jpg"; ?>" class="rounded-circle" alt="NAME4">
          </a>
          <a href="#" class="wrapper-toggle-right">
            <h4>NAME4</h4>
          </a>
          <p>TITLE</p>
          <b>BIO</b></a>
        </div>
      </div>
      <div class="team-collapse-wrapper" id="toggle-content-right">
         <div class="">
           <div class="collapse-content">
             <div class="collapse-header">
               <h2>NAME4</h2>
               <p>INFO</p>
             </div>
             <div class="row justify-content-center">
               <div class="col-12 col-md-8">
                 <p style="padding:30px;">DESCRIPTION</p>
               </div>
             </div>
           </div>
         </div>
       </div>
    </div>
  </div>
</section>

Here is the JQuery for this particular section:

$('.wrapper-toggle-left').click(function(e){
    e.preventDefault();
    $('#toggle-content-left').slideToggle(500);
    $('#toggle-content-right').slideUp(500);
  });
  $('.wrapper-toggle-right').click(function(e){
    e.preventDefault();
    $('#toggle-content-right').slideToggle(500);
    $('#toggle-content-left').slideUp(500);
  });

I have a strong feeling that it's because the #toggle-content-right and #toggle-content-left are repeated in the HTML (since IDs should only be named once), but I've tried a number of different variants with both the HTML and the JQuery and it either breaks things or does nothing.

Any ideas?

question from:https://stackoverflow.com/questions/65906419/bootstrap-4-column-row-columns-3-and-4-are-pointing-to-columns-1-and-2-on-exp

Answer 1

Waitting for answers