jQuery Alternative Div Elements

user_9261827 0
Viewed 69

Can someone please help me understand the jQuery code and how it relates to my HTML. The links are going through and hiding all the divs, however I can't figure out why the div isn't showing when it's link is clicked.

HTML:

<section class="meet-the-team pt-5 pb-5">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <a href="javascript:;" class="conor-link" data-target="conor">Link 1</a>
        <a href="javascript:;" class="kyle-link" data-target="kyle">Link 2</a>
        <a href="javascript:;" class="tracey-link" data-target="tracey">Link 3</a>
        <a href="javascript:;" class="frank-link" data-target="frank">Link 4</a>
        <a href="javascript:;" class="rosie-link" data-target="rosie">Link 5</a>
        <div class="meet-the-team-info">
          <div class="conor-div">
            <h1>Conor</h1>
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
            <p>Hello Hello Hello</p>
          </div>
          <div class="kyle-div">I'm div2</div>
          <div class="tracey-div">I'm div3</div>
          <div class="frank-div">I'm div4</div>
          <div class="rosie-div">I'm div5</div>
        </div>
      </div>
    </div>
  </section>

jQuery:

$(function () {

    $(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();

    $("a").bind("click", function () {
       $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
       var target = $(this).data("target");
       $("."+target).toggle();
    });

});
bootstrap-4 css html jquery javascript
3 Answers

You just need to change one line of your jQuery.

$(function () {

    $(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();

    $("a").bind("click", function () {
       $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
       var target = $(this).data("target");
       $("."+target+"-div").show() //added "-div" and changed toggle to show
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <a href="javascript:;" class="conor-link" data-target="conor">Link 1</a>
        <a href="javascript:;" class="kyle-link" data-target="kyle">Link 2</a>
        <a href="javascript:;" class="tracey-link" data-target="tracey">Link 3</a>
        <a href="javascript:;" class="frank-link" data-target="frank">Link 4</a>
        <a href="javascript:;" class="rosie-link" data-target="rosie">Link 5</a>
        <div class="meet-the-team-info">
          <div class="conor-div">
            <h1>Conor</h1>
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
            <p>Hello Hello Hello</p>
          </div>
          <div class="kyle-div">I'm div2</div>
          <div class="tracey-div">I'm div3</div>
          <div class="frank-div">I'm div4</div>
          <div class="rosie-div">I'm div5</div>
        </div>
      </div>
    </div>
  </section>

user_38257770

@natels's solution works and deserves to be the accepted answer. But even his solution can be shortened a little bit:

$(function () {
  $("a").click(function () {
    $(".meet-the-team-info div:visible").hide(); // first hide all visible team divs,
    $("."+this.dataset.target+"-div").show();    // then show the chosen one
  }).eq(0).click(); // emulate a click on the first link (index=0)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <a href="#" class="conor-link" data-target="conor">Link 1</a>
        <a href="#" class="kyle-link" data-target="kyle">Link 2</a>
        <a href="#" class="tracey-link" data-target="tracey">Link 3</a>
        <a href="#" class="frank-link" data-target="frank">Link 4</a>
        <a href="#" class="gwen-link" data-target="gwen">Link 5</a>
        <a href="#" class="rosie-link" data-target="rosie">Link 6</a>
        <div class="meet-the-team-info">
          <div class="conor-div">
            <h1>I'm Conor</h1>
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
            <p>Hello Hello Hello</p>
          </div>
          <div class="kyle-div">I'm Kyle</div>
          <div class="tracey-div">I'm Tracey</div>
          <div class="frank-div">I'm Frank</div>
          <div class="gwen-div">I'm Gwen</div>
          <div class="rosie-div">I'm Rosie</div>
        </div>
      </div>
    </div>
  </section>

The code in this snippet does not need to be adjusted if more divs are to be included in the page. The individual class names do not occur in the code any more.

user_26100610

i think you have an extra hide() there. The first hide(), hides all the divs on page load. But then on click you say "hide" and "toggle". They're canceling each other or doing something unexpected. Try just toggle(). And also you're missing the "div" part in your selector.

$(function () {

$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();

$("a").bind("click", function () {
  // $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
   var target = $(this).data("target");
   $("."+target+"-div").toggle();
});

});

user_73235890
Related