Popup Accordions not working With jQuery?

Question

I am making a popup modal box in which when the user click on more information new modal box again popup on the same page but it's not working properly I have tried everything,Example of Popup Modal if you click more information new box open ups, I am trying something like this.

Also please hide the popup on accept and deny button and set a cookie for popup

CSS

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

  $(document).ready(function() {
      $(".footerr ul li:last-child").click(function(e) {
        e.preventDefault();
        $('#popUpContain').css('display', 'none');
        $(".serviceMainContent1").css('display', 'block');
      })

      $("#closeInfoBtn").click(function(e) {
        e.preventDefault();
        $('#popUpContain').css('display', 'block');
        $(".serviceMainContent1").css('display', 'none');
      })

      $(".cat_btn").click(function(e) {
        e.preventDefault();
        $(".serv_btn a").css({
          "color": "#303030"
        });
        $(".serv_btn").css({
          "border-bottom": "none"
        });
        $('#services1').css('display', 'none');
        $("#category").css('display', 'block');
        $(".cat_btn a").css({
          "color": "blue"
        });
        $(".cat_btn").css({
          "border-bottom": "2px solid blue"
        });
      });
      $(".serv_btn").click(function(e) {
        e.preventDefault();
        $(".cat_btn a").css({
          "color": "#303030"
        });
        $(".cat_btn").css({
          "border-bottom": "none"
        });
        $("#category").css('display', 'none');
        $('#services1').css('display', 'block');
        $(".serv_btn a").css({
          "color": "blue"
        });
        $(".serv_btn").css({
          "border-bottom": "2px solid blue"
        });
      })


      var acc = document.getElementsByClassName("accordion1");
      var i;

      for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
          } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
          }
        });
      }

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.popUp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  display: block;
  background-color: white;
}

#language {
  width: 57px;
  padding: 4px;
  border: 1px solid #dbdbdb;
}

.header1 {
  display: flex;
  justify-content: flex-end;
}

.container1,
.serviceMainContent1 {
  display: flex;
  flex-direction: column;
  width: 595px;
  padding: 14px;
  box-shadow: -1px 16px 34px 2px #dbdbdb;
  border-radius: 7px;
}

.bodyy h3 {
  color: #303030;
}

.bodyy p {
  line-height: 19px;
  margin-top: 10px;
  font-size: 13px;
}

.footerr>a {
  padding: 7px 90px;
  border-radius: 9px;
  margin: 0px 10px;
}

.footerr>.deny {
  background-color: #ededed;
  color: #303030;
}

.footerr>.accept {
  background-color: #0096FF;
  color: #fff;
}

.footerr>.deny:hover {
  background-color: #f4f2f2;
}

.footerr>.accept:hover {
  background-color: #4eabf7;
}

.footerr>a:hover {
  text-decoration: none;
}

.footerr>p {
  text-align: center;
  padding-top: 10px;
  font-size: 12px;
}

.footerr>ul {
  display: flex;
  list-style: none;
  font-size: 13px;
}

.footerr>ul li {
  padding-right: 10px;
  color: #c4c2c2;
}


/* more information css   */

.serviceMainContent1 {
  height: 654px;
  overflow-y: scroll;
  display: none;
}

.header1 a {
  font-size: 20px;
  width: 40px;
  text-align: center;
}

.header1 a:hover {
  text-decoration: none;
  color: #303030;
}

.categoryServices1 {
  height: 436px;
  width: 563px;
  overflow-y: scroll;
  background-color: #f8f7f7;
}

.cat_serv_btn,
.footerBtn {
  display: flex;
  text-align: center;
}

.cat_serv_btn .cat_btn,
.cat_serv_btn .serv_btn,
.footerBtn a {
  width: 50%;
}

.cat_btn,
.serv_btn {
  padding: 10px 0px;
}

.cat_btn:active,
.serv_btn:active {
  border-bottom: 2px solid blue;
}

.cat_btn a:active,
.serv_btn a:active {
  color: blue;
}

.cat_btn a:hover,
.serv_btn a:hover {
  text-decoration: none;
}

.bodyy span {
  padding: 20px 20px 20px 0;
}

.bodyy a,
.bodyy i {
  font-size: 13px;
}

.footerBtn a {
  padding: 5px 0px;
  border-radius: 5px;
  margin: 0px 10px;
  color: #303030;
}

.footerBtn a:hover {
  text-decoration: none;
}

.footerBtn .save,
.footerBtn .deny {
  background-color: #f5f5f5;
}

.footerBtn .save:hover,
.footerBtn .deny:hover {
  background-color: #e7e6e6;
}

.footerBtn .close {
  background-color: #0096FF;
  color: #fff;
}

.footerBtn .close:hover {
  background-color: #4eabf7;
}


/* switch buttons */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider1 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider1:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider1 {
  background-color: #2196F3;
}

input:focus+.slider1 {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider1:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider1.round {
  border-radius: 34px;
}

.slider1.round:before {
  border-radius: 50%;
}


/* accordions */

.accordion1 {
  margin: 20px 0px;
  width: 500px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.accordion1 div p {
  font-size: 13px;
}

.accordion1 {
  display: flex;
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion1:hover {
  background-color: #fff;
}

.panel {
  padding: 0px 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
  font-size: 13px;
}

#services1 {
  display: none;
}


/* media query for mobile device */

@media only screen and (max-width: 600px) {
  .container {
    width: 400px;
  }
  .footerr>a {
    padding: 5px 40px;
  }
}


  
    
      
      BCT-Touristik
      
    
    
      We value your privacy
      We and our partners are using technologies like Cookies or Targeting and process personal data like IP-address or browser information in order to personalize the advertisement you see. This helps us to show you more relevant ads and improves your
        internet experience. We also use it in order to measure results or align our website content. Because we value your privacy, we are herewith asking your permission to use the following technologies. You can always change/withdraw your consent
        later by clicking on the settings button on the left lower corner of the page.
    


    
      
         Privacy Policy
          Legal Notice
         Travel Condition
         More information
      


      Deny
      Accept and close
      Powered by BCT-Touristik
    
  
  
    
      
        
        
        ✖
      
      
        Privacy Settings
        This tool helps you to select and deactivate various tags / trackers / analysis tools used on this website. 
         Privacy Policy
         Legal Notice
      
      
        
          Categories
        
        
          Services
        
      
      
        
          
            
              
                Functional
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib
              
              
                
                                        
                                        
                                    
              
            

            
              
              Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            
          
          
            
              
                Functional
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib
              
              
                
                                        
                                        
                                    
              
            
            
              
              Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            
          
          
            
              
                Functional
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib
              
              
                
                                        
                                        
                                    
              
            

            
              
              Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            
          
          
            
              
                Functional
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib
              
              
                
                                        
                                        
                                    
              
            
            
              
              Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            
          
        
        
          
            
              
                Services
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib
              
              
                
                                        
                                        
                                    
              
            

            
              
              Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            
          
          
            
              
                Services
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib
              
              
                
                                        
                                        
                                    
              
            
            
              
              Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            
          
        
      
      
        

        
          Save
          Deny
          Accept and close
        
        Powered by Usercentrics Consent Management

Suggest me where I am going wrong in this I need to open another modal box on more info click?

Popup Accordions not working With jQuery?

0 Answers