<?php
//echo "called Workshop pages!!!"; 
//echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('workshop-toggle-content')->toHtml();

//echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('volunteer-investplan')->toHtml();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$faq1question = $objectManager->get('Magento\Framework\App\Config\ScopeConfigInterface')->getValue('workshop/general/faq_question_1_text');
$faq1answer = $objectManager->get('Magento\Framework\App\Config\ScopeConfigInterface')->getValue('workshop/general/faq_answer_1_text');
$faq2question = $objectManager->get('Magento\Framework\App\Config\ScopeConfigInterface')->getValue('workshop/general/faq_question_2_text');
$faq2answer = $objectManager->get('Magento\Framework\App\Config\ScopeConfigInterface')->getValue('workshop/general/faq_answer_2_text');

?>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->

<section class="collapse-box">
    
<div class="container">
<div class="row">
<div class="col-md-12 pt-3">
<h3 class="mdg-first-text-left">What do you get?</h3>
</div>
</div>
</div>
 <div class="accordion-container">   
<div class="container"><!--Accordion wrapper-->

<div class="card collapse-card set"><!-- Card header -->
<div id="headingOne1" class="card-header collap-header" role="tab">
<h5 class="mb-0 cillaps-head-text"><?php echo $faq1question; ?><i class="fa fa-plus"></i></h5>
</div>
<!-- Card body -->
<div id="collapseOne1" class="slide_content slideup" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
<div id="myDIV1" class="card-body collap-body" class="content"><?php echo $faq1answer; ?></div>
</div>
</div>
<!-- Accordion card --> <!-- Accordion card -->
<div class="card collapse-card set"><!-- Card header -->
<div id="headingTwo2" class="card-header collap-header" role="tab">
<h5 class="mb-0 cillaps-head-text"><?php echo $faq1question; ?><i class="fa fa-plus"></i></h5>
</div>
<!-- Card body -->
<div id="collapseTwo2" class="slide_content slideup" role="tabpanel" aria-labelledby="headingTwo2" data-parent="#accordionEx">
<div id="myDIV2" class="card-body collap-body" class="content"><?php echo $faq2answer; ?></div>
</div>
</div>

<style type="text/css">
.slideup, .slidedown {
      max-height: 0;            
      overflow-y: hidden;
      -webkit-transition: max-height 0.8s ease-in-out;
      -moz-transition: max-height 0.8s ease-in-out;
      -o-transition: max-height 0.8s ease-in-out;
      transition: max-height 0.8s ease-in-out;
  }
  .slidedown {            
      max-height: 90px ;                    
  }  
</style>
<script type="text/javascript">
    require([
    'jquery',
    'mage/template',
    'jquery/ui',
    'mage/translate'
    ],
    function($, mageTemplate) {

        $(document).ready(function() {
          $(".set").on("click", function() {

            if ($(this).find('i').hasClass("fa-minus")) {
              $(this).find('.collap-header').removeClass("slideopened");
              $(this).find('.slide_content').toggleClass("slideup slidedown");
              $(this).find('i').toggleClass("fa-plus fa-minus");
            }else{
               $(".set").find('.collap-header').removeClass("slideopened");
               $(this).find('.collap-header').addClass("slideopened");
               $('.accordion-container').find('.slidedown').addClass("slideup");
               $('.accordion-container').find('.slidedown').removeClass("slidedown");

               $('.set').find('.fa-minus').addClass("fa-plus");
               $('.set').find('.fa-minus').removeClass("fa-minus");
               $(this).find('.slide_content').toggleClass("slidedown slideup");
               $(this).find('i').toggleClass("fa-minus fa-plus");
            }
          });
        });
    });
</script>


<style>

/*body{
  background-color: #567;
  padding: 0 10px;
  font-family: 'Open Sans', sans-serif;
}*/
/*.accordion-container{
  position: relative;
  max-width: 500px;
  height: auto;
  margin: 10px auto;
}
.accordion-container > h2{
  text-align: center;
  color: #fff;
  padding-bottom: 5px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
.set{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
}
.set > a{
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #555;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  transition:all 0.2s linear;
}
.set > a i{
  float: right;
  margin-top: 2px;
}
.set > a.active{
  background-color:#3399cc;
  color: #fff;
}
.content{
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display:none;
}
.content p{
  padding: 10px 15px;
  margin: 0;
  color: #333;
}*/


.fa.fa-minus {
    float: inline-end;
    font-size: smaller;
    color: #51b761;
}

</style>





<!--<style>

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

</style>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");
    //alert("hi");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

</script>

-->

