<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true)
    die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>

<div class="b-faq__block">
    <div class="container">
        <div class="row">
            <div class="col-lg-12"><h2 style="margin-bottom: 30px;">Смета на бухгалтерские услуги</h2></div>
            <div class="col-lg-5">                
                <div class="b-qtn">
                    <? foreach ($arResult["Headers"] as $header) { ?>        
                        <div>
                            <a  href="<?= $header["CODE"] ?>" data-code="<?= $header["CODE"] ?>" rel="nofollow"><?= $header["NAME"] ?></a>
                        </div>

                    <? } ?>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="b-answer content-page">
                    <? foreach ($arResult["elements"] as $element) { ?>
                        <div class="answer hidden" data-code="<?= $element["CODE"] ?>">
                            <?= $element["PREVIEW_TEXT"] ?>
                        </div>
                    <? } ?>
                </div>		
            </div>
        </div>
    </div>
</div>
<script>
$( document ).ready(function() {
          b_qtn_height = $('.b-faq__block .b-qtn').height();
          $('.b-answer.content-page').css("min-height",b_qtn_height + "px");    
        // подгрузка ответов
        $('.b-faq__block .b-qtn a').click(function(e){
                e.preventDefault();
                faqInit($(this));
        });           
                // подгрузка ответов
        function faqInit(link){
                $('.b-faq__block .b-qtn a').removeClass('active');
                link.addClass('active');
        }
        
  $('.b-qtn > div > a').click(function(){

    that = ($(this));
    $(".b-answer").fadeOut("1",function(){
      $(".b-answer .answer").addClass("hidden");
      $(".b-answer .answer").each(function(){
        if($(this).data('code')==that.data('code')){
          $(this).removeClass('hidden');}
      })
    })
    $(".b-answer").fadeIn("1");
  });
  $('.b-qtn > div:first > a').click();
  
});    
</script>
