Remove class only when text blocks are all hidden-CodePudding

I have a problem with jquery. I can't find a solution to close this. That is, when I click on the first one and move over the buttons the button block stays fixed on the left instead of going back to the center or prevent the text block from disappearing once activated. I thought of these two solutions, I would be fine with one thing like this:

on the second click remove the classes "crossRotate" and "showlink", if I use toggleClass it happens that if I re-click on it happens a problem skips everything
at this point that a person clicked over the button always stays without disappearing.

Thank you all for your help and time

$(document).ready(function() {
  $(".namebutton").click(function() {
    var div = $("#"   this.value);
    div.toggle("slow").siblings().hide("slow");
    $("#buttons").addClass('crossRotate');
    $("#boxlink, #boxtext").addClass('showlink');
  });
});

body {
  background-color: #000!important;
  color: #ddd;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 300;
  width: 100%;
  height: 900px;
}

h5 {
  color: white;
  font-weight: 400;
  margin-bottom: 0;
  font-size: 60px;
}

.lefteffect {
  transform: translateX(-300px);
}

.testo-descrizione {
  height: 150px;
  width: 350px;
}

.movimento {
  transition: opacity 1s ease;
}

.buttonsclass {
  display: table;
}

.brandname,
.serviceclass,
.b2bclass {
  display: table-row;
}

.tablecell {
  display: table-cell;
  vertical-align: middle;
}

.content {
  display: none;
}

.content-2 {
  display: inline-block;
}

.fullwidth {
  width: 100%;
}

.content-33 {
  width: 40%;
  display: inline-block;
}

.content-3 {
  transition-property: left, right;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

#buttons>h5 {
  margin-bottom: 4%;
}

.crossRotate {
  animation: button 2s linear 0s 1 normal forwards;
}

@keyframes button {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100px);
  }
}

.brandproject1 {
  list-style: none;
  opacity: 0;
  visibility: hidden;
  padding: 10px;
  -webkit-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}

.showlink {
  visibility: visible;
  opacity: 1;
  width: 80%;
}

.link {
  background-color: #fff;
  width: 48%;
  margin-right: 10px;
}

.text {
  background-color: #ff0000;
  width: 48%;
}

.aParent div {
  float: left;
  clear: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div  style="height: 900px;">
    <div >
      <div  style="height: 600px;margin: auto;">
        <div id="buttons"  style="width:90px">
          <h5><input type="button" id="button1"  value="Brand" style="width: 100%;"></input>
          </h5>
          <h5><input type="button" id="button2"  value="Servizi" style="width: 100%;"> </input>
          </h5>
          <h5><input type="button" id="button3"  value="B2B" style="width: 100%;"></input>
          </h5>
        </div>
        <div id="boxlink" >
          <div id="Brand"  style="display:none;width: 100%;">
            <div >
              <span><a href="#">1</a></span><br>
              <span><a href="#/">1</a></span>
            </div>
            <div >
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </div>
          <div id="Servizi"  style="display:none;width: 100%;">
            <div >
              <span><a href="#">2</a></span><br>
              <span><a href="#/">2</a></span>
            </div>
            <div >
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </div>
          <div id="B2B"  style="display:none;width: 100%;">
            <div >
              <span><a href="#">3</a></span><br>
              <span><a href="#/">3</a></span>
            </div>
            <div >
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

CodePudding user response：

Okay got it the problem is you are modifying the div for the logic of clicking on different buttons regardless you click on the same button also.

I have modified it to work as you intended. Here is one way to do it.

$(document).ready(function() {
  $(".namebutton").click(function(){
    $("#"   this.value).toggle("slow").siblings().hide("slow");
    var active = $("#"   this.id).hasClass('active');
    for (var i of $("#buttons>h5>input")) { i.classList.remove('active')}
    if(!active) {    
         $('#buttons').addClass('crossRotate');
         $('#boxlink').addClass('showlink');
        $("#"   this.id).addClass('active');
    } else {
        $('#buttons').removeClass('crossRotate');
        $('#boxlink').removeClass('showlink');
        $("#"   this.id).removeClass('active');
    }
})})

hope this helps.