add class second id jquery-CodePudding

I have a problem and I can't figure out how to solve it and I thank you already in advance for your time.

I cannot add a class to an id via js, the original idea was to apply two classes when the input is clicked. Unfortunately only the first one works and the "link" class is not applied to that id (#boxlink).

I will leave you the code and thank you

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

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;
  background-color: rgb(210 57 73);
  color:#fff;
  -webkit-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}

.link {
  visibility: visible;
  opacity: 1;
}

<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: 900px;margin: auto;">
            <div id="buttons"  style="width:90px">
                <h5><input type="button" id="button1"  value="Brand"></input></h5>
                <h5><input type="button" id="button2"  value="Servizi"> </input></h5>
                <h5><input type="button" id="button3"  value="B2B"></input></h5>
            </div>
            <div id="#boxlink"  style="width:150px">
              <div id="Brand" style="display:none">
                 <span><a href="#">1</a></span><br> 
                 <span><a href="#/">2</a></span>
              </div>
              <div id="Servizi" style="display:none">
                 <span><a href="#">2</a></span><br> 
                 <span><a href="#">2</a></span>
              </div>
              <div id="B2B" style="display:none">
                 <span><a href="#">3</a></span><br> 
                 <span><a href="#">3</a></span>
              </div>
            </div>
         </div>
      </div>
   </div>
</div>
</div>

CodePudding user response：

<div id="#boxlink" ...> is your error. In css selectors, # means an id property, avoid it in the id value (<div id="boxlink" ...>).

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

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;
  background-color: rgb(210 57 73);
  color:#fff;
  -webkit-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}

.link {
  visibility: visible;
  opacity: 1;
}

<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: 900px;margin: auto;">
            <div id="buttons"  style="width:90px">
                <h5><input type="button" id="button1"  value="Brand"></input></h5>
                <h5><input type="button" id="button2"  value="Servizi"> </input></h5>
                <h5><input type="button" id="button3"  value="B2B"></input></h5>
            </div>
            <div id="boxlink"  style="width:150px">
              <div id="Brand" style="display:none">
                 <span><a href="#">1</a></span><br> 
                 <span><a href="#/">2</a></span>
              </div>
              <div id="Servizi" style="display:none">
                 <span><a href="#">2</a></span><br> 
                 <span><a href="#">2</a></span>
              </div>
              <div id="B2B" style="display:none">
                 <span><a href="#">3</a></span><br> 
                 <span><a href="#">3</a></span>
              </div>
            </div>
         </div>
      </div>
   </div>
</div>
</div>