About Us Accordion

History Of NOVA

Our Story in Short

Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.

History Of NOVA

Our Story in Short

Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.

History Of NOVA

Our Story in Short

Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.

History Of NOVA

Our Story in Short

Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.

History Of NOVA

Our Story in Short

Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.

View Source

HTML

<!-- Accordion -->
<section class="an-accord-section" id="an-accord-section">
    <div class="an-accord-container">
        <div class="an-accord-row">
            
            <div class="an-accord-list">
                
                <!-- Accord Items -->
                <div class="an-accord-item active border_blue">
                    <div class="an-accord-item-desc">
                        <h2 class="accord-mini-title ab_blue">History Of NOVA</h2>
                        <div class="panel">
                            <div class="inner-panel">
                                <h2 class="accordion-header ab_blue">
                                    Our Story in Short
                                </h2>
                                <p class="accordion-desc ab_blue">Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Accord Items End -->

                <!-- Accord Items -->
                <div class="an-accord-item border_grey">
                    <div class="an-accord-item-desc">
                        <h2 class="accord-mini-title ab_grey">History Of NOVA</h2>
                        <div class="panel">
                            <div class="inner-panel">
                                <h2 class="accordion-header ab_grey">
                                    Our Story in Short
                                </h2>
                                <p class="accordion-desc ab_grey">Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Accord Items End -->

                <!-- Accord Items -->
                <div class="an-accord-item border_grey">
                    <div class="an-accord-item-desc">
                        <h2 class="accord-mini-title ab_grey">History Of NOVA</h2>
                        <div class="panel">
                            <div class="inner-panel">
                                <h2 class="accordion-header ab_grey">
                                    Our Story in Short
                                </h2>
                                <p class="accordion-desc ab_grey">Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Accord Items End -->

                <!-- Accord Items -->
                <div class="an-accord-item border_grey">
                    <div class="an-accord-item-desc">
                        <h2 class="accord-mini-title ab_grey">History Of NOVA</h2>
                        <div class="panel">
                            <div class="inner-panel">
                                <h2 class="accordion-header ab_grey">
                                    Our Story in Short
                                </h2>
                                <p class="accordion-desc ab_grey">Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Accord Items End -->

                <!-- Accord Items -->
                <div class="an-accord-item border_grey">
                    <div class="an-accord-item-desc">
                        <h2 class="accord-mini-title ab_grey">History Of NOVA</h2>
                        <div class="panel">
                            <div class="inner-panel">
                                <h2 class="accordion-header ab_grey">
                                    Our Story in Short
                                </h2>
                                <p class="accordion-desc ab_grey">Since 1909, we’ve been dedicated to making the best cheese with the best ingredients. From our beginning, we’ve treated the land, our people and animals with care & respect.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Accord Items End -->

            </div>

        </div>
    </div>
</section>
<!-- Accordion End -->

CSS

.an-accord-section {
  background-color: #f4f4f4;
  overflow: hidden;
}

.an-accord-item {
  flex: 1;
  transition: .5s;
  padding: 25px;
  cursor: pointer;
  max-height: 100vh;
  border: solid 1px #000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  
}
.an-accord-item:nth-child(1){
  background: #A6A399;
}
.an-accord-item:nth-child(2){
  background: #041A48;
}
.an-accord-item:nth-child(3){
  background: #0F224B;
}
.an-accord-item:nth-child(4){
  background: #1B2E54;
}
.an-accord-item:nth-child(5){
  background: #213050;;
}
.an-accord-list {
  display: flex;
  list-style: none;
}

.an-accord-item.active {
    flex: 8;
}
.accord-mini-title {
  width: 140px;
  height: 100%;
  display: flex;
  font-family: 'Raleway';
  text-align: center;
  transform: rotate(270deg);
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
  margin: auto;
}
.accordion-header{
  font-family: 'Raleway';
  font-size: 50px;
  line-height: 1.2;
  margin-block: 20px;
}
.accordion-desc{
  font-family: 'Poppins';
  font-size: 20px;
  line-height: 1.2;
  margin-block: 5px;
  width: 60%;
  margin: auto;
}
.an-accord-item-desc {
  display: grid;
  grid-template-columns: 20% 80%;
  text-align: center;
  overflow: hidden;
}
.an-accord-item.active .panel {
  opacity: 1.0;
  width: 100%;
  transform: translateX(0);
  align-items: center;
  justify-content: center;
}
.panel {
  overflow: hidden;
  transform: translateX(110%);
  position: relative;
}
.ab_blue{
  color: #1B2E54;
}
.ab_grey{
  color: #cfcbbf;
}

@media only screen and (min-width:1201px) {
  .inner-panel{
    position: absolute;
      max-width: 425px;
      min-width: 280px;
      width: max-content;
  }
  .an-accord-item.active .panel{
    min-height: 100vh;
  }
  .panel{
    min-height: 100vh;
  display: flex;
  align-items: center;
  }
  .an-accord-item-desc {
    width: 100%;
  }
  .accordion-desc{
    width: 100%;
  }
}
@media only screen and (min-width: 1201px) and (max-width: 1400px){
  .inner-panel{
    max-width: 325px;
  }
  .accordion-header{
    font-size: 38px;
  }
  .accordion-desc{
    font-size: 16px;
  }
}
  @media(max-width:1200px){
  .an-accord-item{
    flex: none;
    max-width: 70%;
    margin-inline: 15px;
    border: 2px solid #1e1e1e;
    border-radius: 30px;
    min-height: 50vh;
    height: 100%;
    margin-block: 35px;
}
  .an-accord-list {
    overflow: scroll;
  }
  .panel{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transform: translateX(0);
  }
  .accord-mini-title{
    transform: rotate(0deg);
  }
  .an-accord-item.active{
    flex: none;
  }
  .an-accord-item-desc {
    grid-template-columns: 100%;
  }
  .border_grey{
    border: 2px solid #cfcbbf;
  }
  .border_blue{
      border: 2px solid #1B2E54;
  }
}
@media(max-width:480px){
  .accordion-desc{
    width: 100%;
    font-size: 16px;
  }
  .accordion-header{
    font-size: 35px;
  }
  .an-accord-item{
    max-width: 95%;
    margin-inline: 10px;
  
  }
 
}

JS

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

    jQuery('.an-accord-item').on('click', function(){

        if(jQuery(this).hasClass('active')) {
            
            jQuery('.an-accord-item').removeClass('active');
            jQuery(this).addClass('active');

        } else {

            jQuery('.an-accord-item').removeClass('active');
            jQuery(this).addClass('active');

        }

    })

})
    
});

Links

<!-- Font-Poppins -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    <!-- Font-Raleway -->
    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>