Hide-show div and add-remove class on click with if-else statement-CodePudding

I need multiple divs with the common class names which need to 'hide-show' on click. The 'Up-Arrow/Down-Arrow' href css also needs to change correspondingly.

I first append the <a href> span to my target divs and set it as .hide() with class 'ArrowUp' by default.

var TrainArrowUp = $('<a href="#" ></a>')
var TrainArrowDown = $('<a href="#" ></a>')
$(".TrainTransportHeading").append(TrainArrowUp);
$(".TrainContainer").hide()

I then add a click function with an if-else statement that identifies the class-name of the div and changes it accordingly as below.

$(document).on('click', '.Train' , function() {
    var TrainArrowClass = $(this).attr("class").split(" ").join("")

    if (TrainArrowClass == "TrainArrowUp") {
        $(".TrainContainer").show()
        $(".TrainArrow").addClass('ArrowDown').removeClass('ArrowUp');
    }
    else if (TrainArrowClass == "TrainArrowDown") {
        $(".TrainContainer").hide()
        $(".TrainArrow").addClass('ArrowUp').removeClass('ArrowDown');
    }
});

However, this is working only once and not looping as required. What have I missed here?

Below full working code:

Show code snippet

jQuery(document).ready(function($) {

  var TrainArrowUp = $('<a href="#" ></a>')
  var TrainArrowDown = $('<a href="#" ></a>')
  $(".TrainTransportHeading").append(TrainArrowUp);
  $(".TrainContainer").hide()


  $(document).on('click', '.Train', function() {
    var TrainArrowClass = $(this).attr("class").split(" ").join("")

    if (TrainArrowClass == "TrainArrowUp") {
      $(".TrainContainer").show()
      $(".TrainArrow").addClass('ArrowDown').removeClass('ArrowUp');
    } else if (TrainArrowClass == "TrainArrowDown") {
      $(".TrainContainer").hide()
      $(".TrainArrow").addClass('ArrowUp').removeClass('ArrowDown');
    }
  });

});

.ArrowUp {
  display: flex;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
}

.ArrowDown {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
}

.TrainOuterContainer {
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
  font-size: 80%;
  border-style: solid;
  border-color: rgb(58, 146, 7);
  border-width: 0.5px 0.5px 0.5px 0.5px;
}

.OptionNumber {
  display: flex;
  flex-basis: content;
  background-color: rgb(58, 146, 7);
  width: 100%;
  color: white;
  padding: 1px;
  margin: auto;
  margin-top: 0px;
  align-content: center;
}

.TotalTravelTime {
  display: flex;
  width: 100%;
  background-color: rgb(75, 13, 243);
  color: white;
  padding: 1px;
  margin: auto;
  margin-bottom: 0px;
  align-self: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <div class="TrainOuterContainer">
        <div class="OptionNumber">
          <div class="TrainTransportHeading" style="display:flex; margin:auto; text-align: center;">Train</div>
        </div>
        <div class="TrainContainer">
          <div class="InnerContainer"> Train 1 Details </div>
          <div class="InnerContainer"> Train 2 Details </div>
        </div>
        <div class="TotalTravelTime">Travel time</div>
      </div>
    </td>
    <td>
      <div class="TrainOuterContainer">
        <div class="OptionNumber">
          <div class="TrainTransportHeading" style="display:flex; margin:auto; text-align: center;">Train</div>
        </div>
        <div class="TrainContainer">
          <div class="InnerContainer"> Train 1 Details </div>
          <div class="InnerContainer"> Train 2 Details </div>
        </div>
        <div class="TotalTravelTime">Travel time</div>
      </div>
    </td>
  </tr>

</table>

CodePudding user response：

Since you are using jQuery, you can simply do this:

if ($(".Train").hasClass('ArrowUp')) {
  $(".TrainContainer").show()
  $(".Train").addClass('ArrowDown').removeClass('ArrowUp');
} else {
  $(".TrainContainer").hide()
  $(".Train").addClass('ArrowUp').removeClass('ArrowDown');
}

Using the hasClass() method of jQuery.

Show code snippet

jQuery(document).ready(function($) {

  var TrainArrowUp = $('<a href="#" ></a>')
  $(".TrainTransportHeading").append(TrainArrowUp);
  $(".TrainContainer").hide()


  $(document).on('click', '.Train', function() {
    if ($(".Train").hasClass('ArrowUp')) {
      $(".TrainContainer").show()
      $(".Train").addClass('ArrowDown').removeClass('ArrowUp');
    } else {
      $(".TrainContainer").hide()
      $(".Train").addClass('ArrowUp').removeClass('ArrowDown');
    }
  });
});

.ArrowUp {
  display: flex;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
}

.ArrowDown {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
}

.TrainOuterContainer {
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
  font-size: 80%;
  border-style: solid;
  border-color: rgb(58, 146, 7);
  border-width: 0.5px 0.5px 0.5px 0.5px;
}

.OptionNumber {
  display: flex;
  flex-basis: content;
  background-color: rgb(58, 146, 7);
  width: 100%;
  color: white;
  padding: 1px;
  margin: auto;
  margin-top: 0px;
  align-content: center;
}

.TotalTravelTime {
  display: flex;
  width: 100%;
  background-color: rgb(75, 13, 243);
  color: white;
  padding: 1px;
  margin: auto;
  margin-bottom: 0px;
  align-self: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table>
  <tr>
    <td>
      <div class="TrainOuterContainer">
        <div class="OptionNumber">
          <div class="TrainTransportHeading" style="display:flex; margin:auto; text-align: center;">Train</div>
        </div>
        <div class="TrainContainer">
          <div class="InnerContainer"> Train 1 Details </div>
          <div class="InnerContainer"> Train 2 Details </div>
        </div>
        <div class="TotalTravelTime">Travel time</div>
      </div>
    </td>
    <td>
      <div class="TrainOuterContainer">
        <div class="OptionNumber">
          <div class="TrainTransportHeading" style="display:flex; margin:auto; text-align: center;">Train</div>
        </div>
        <div class="TrainContainer">
          <div class="InnerContainer"> Train 1 Details </div>
          <div class="InnerContainer"> Train 2 Details </div>
        </div>
        <div class="TotalTravelTime">Travel time</div>
      </div>
    </td>
  </tr>

</table>