Comments System

6/recent/ticker-posts

How to make accordion change both left and right content

officialweblearn August 07, 2023


 Source Code:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <title>Hello, world!</title>

  <style>

.content > div {
  width: 50%;
  float: left;
  height: 400px;
  box-sizing: border-box;
}

.title {
  
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
  padding-left: 40px;
  transition: 0.3s;
  margin-bottom: 10px;
  border-bottom: 1px solid #F6F5FF;
  font-weight: 700;
}

.title:after {
  content: '\f105';
  font-family: fontawesome;
  float: right;
  margin-right: 5px;
  margin-top: 3px;
  transition: 0.3s;
}

.title.active:after {
  transform: rotate(90deg);
  color: orange;
}

.title:hover,
.title.active {
  background-color: ;
  color: #2a2929;
}

.desc {
  padding: 40px;
  display: none;
  background-color: #F6F5FF;
}

.desc.active {
  display: block;
  
}

.image {
  text-align: right
}

.image img {
  width: 350px;
  aspect-ratio: 1;
  object-fit: cover;
}

.accordionsec{
padding-top: 60px ;

}

  </style>
  
</head>

<body>

  <section class="accordionsec">
    <div class="container">
      <div class="content">
        <div class="accordion">
          <div class="title active" data-image="1.jpg">
            Pre-processing
          </div>
          <div class="desc active">
            Convert scanned documents into readable format and enhance document quality
            Harness the power of automated de-skewing, unblur and auto-rotation techniques.
            Detect unwanted overlays on documents and address any font issues to ensure proper rendering of text
          </div>
          <div class="title" data-image="2.jpg">
            Classification
          </div>
          <div class="desc">
            Efficient classification and page separation to uncover relevant pages in multi-page documents.
            Deep-learning based classification of documents for accurate classification into predefined categories
            Employ advanced text analysis and matching algorithms for text based document matching
          </div>
          <div class="title" data-image="3.jpg">
            Data Extraction
          </div>
          <div class="desc">
            Employ human-like readability of documents while seamlessly adapting to formatting variances
            Extract structured and non-structured data with automated table extraction and key-value detection
            Enable bar-code reading and vertical text reading to ensure extraction of encoded data or vertical alignment in specific languages
          </div>

          <div class="title" data-image="1.jpg">
            Validation
          </div>
          <div class="desc">
            Employ data validation and cleaning for accuracy and consistency
            By automating data processing, we help you mitigate the time humans spend validating data.
            Our innovative data capture engine algorithm continuously learns and improves from every human interaction, optimizing the efficiency of the validation process.
          </div>
        
        </div>
        <div class="image">
          <img src="1.jpg">
        </div>
      </div>
    </div>
  </section>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      $('.title').click(function () {
  $(this).addClass('active')
  $(this).siblings('.title').removeClass('active')
  $(this).siblings('.desc').stop().slideUp()
  $(this).next().stop().slideDown()
  var dataImage = $(this).attr('data-image')
  $('.image img').attr('src', dataImage)
})
    </script>
</body>

</html>


officialweblearn

Posted by officialweblearn

Post a Comment

0 Comments