Свернуть строку по клику

Question

Я работаю над этим кодом, но у меня есть трудности с реализацией должным образом. Я хочу разместить стрелку перед вопросом и синхронизировать событие click с текстом.

jsfiddle.net/tx8paL7L/5/

Можете ли вы помочь мне исправить эту проблему?

HTML:

<div class="container faq_wrapper"> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <p> 
       &nbsp;</p> 
      <div class="faq-all-actions"> 
       <a class="faq-expand">Expand All</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="faq-collapse">Collapse All</a></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <div class="question-wrapper"> 
       <div class="arrows"> 
        &nbsp;</div> 
       <div class="big-q"> 
        Q</div> 
       <div class="question"> 
        <div class="arrow"></div><h6>Can I try the software before I buy it?</h6></div> 
       <div class="answer-wrapper"> 
        <div class="big-a"> 
         A</div> 
        <div class="answer"> 
         Yes! Simply <a href="/trial">download a free trial</a> and you&#39;ll have instant access to all features for 30 days, absolutely free. We don&#39;t require your credit card details or any commitment.</div> 
       </div> 
      </div>  
     </div> 
    </div> 
</div> 

CSS:

.answer-wrapper { 
     display: none; 
    } 

    .arrow { 
     margin: 1em; 
    } 

    .arrow::before { 
     position: absolute; 
     content: ''; 
     width: 0; 
     height: 0; 
     border: .5em solid transparent; 
     border-left-color: gray; 
     transform-origin: 0 50%; 
     transition: transform .25s; 
    } 

    .arrow.down::before { 
     transform: rotate(90deg); 
     transition: transform .25s; 
    } 

JavaScript:

$(document) 
    .on('click','.row',function(){ 
     $(this).find('.answer-wrapper').slideToggle(); 
    }) 

    .on('click','.faq-expand',function(){ 
     $('.answer-wrapper').slideDown(); 
    }) 

    .on('click','.faq-collapse',function(){ 
     $('.answer-wrapper').slideUp(); 
    }) 

var arr = document.querySelector('.arrow'); 
arr.addEventListener('click', function(event) { 
    event.target.classList.toggle('down'); 
}); 
; 

Answer 1

Вот рабочая скрипку с JavaScript, CSS-прежнему нуждается в немного работы:

JSFiddle

в основном вы использовали неправильные селекторы для jQue гу.

HTML:

<div class="container faq_wrapper"> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <p> 
       &nbsp;</p> 
      <div class="faq-all-actions"> 
       <a class="faq-expand">Expand All</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="faq-collapse">Collapse All</a></div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="span10 offset1"> 
      <div class="question-wrapper"> 
       <div class="arrows"> 
        &nbsp;</div> 
       <div class="big-q"> 
        Q</div> 
       <div class="question"> 
        <div class="arrow"></div><h6>Can I try the software before I buy it?</h6></div> 
       <div class="answer-wrapper"> 
        <div class="big-a"> 
         A</div> 
        <div class="answer"> 
         Yes! Simply <a href="/trial">download a free trial</a> and you&#39;ll have instant access to all features for 30 days, absolutely free. We don&#39;t require your credit card details or any commitment.</div> 
       </div> 
      </div>  
     </div> 
    </div> 
</div> 

JQuery:

$(document).ready(function() { 
    .on('click','.row .question-wrapper',function(){ 
     $(this).find('.answer-wrapper').slideToggle(); 
     $('.arrow').toggleClass('down'); 
    }) 

    .on('click','.faq-expand',function(){ 
     $('.answer-wrapper').slideDown(); 
     $('.arrow').addClass('down'); 
    }) 

    .on('click','.faq-collapse',function(){ 
     $('.answer-wrapper').slideUp(); 
     $('.arrow').removeClass('down'); 
    }) 

}); 

Answer 2

Чтобы положить стрелку перед вопросом у ожно использовать право 0, как это:

.arrow::before { 
    position: absolute; 
    right: 0; 
    content: ''; 
    width: 0; 
    height: 0; 
    border: .5em solid transparent; 
    border-left-color: gray; 
    transform-origin: 0 50%; 
    transition: transform .25s; 
} 

Когда вы раскладка элемент на позиции абсолютного, вы можете «исправить» элемент по отношению к родителю, если вы хотите (сверху, снизу, справа, слева).

Answer 3

Вы добавили position:absolute, но ничего не сделали, чтобы расположить стрелку.

добавить следующие стили:

.arrow { 
    position:relative; // you need to add position relative 
    margin: 1em; 
    padding-left:10px; 
} 

.arrow::before { 
    position: absolute; 
    left:100%; // define where you would like the arrow to be placed . 
    content: ''; 
    width: 0; 
    height: 0; 
    border: .5em solid transparent; 
    border-left-color: gray; 
    transform-origin: 0 50%; 
    transition: transform .25s; 
} 

использовать положение relative и left для отлично позиционируют свою стрелу.

FIDDLE HERE

Answer 4

Добавить "слева: 190px" к ".arrow :: до того"

.arrow::before { 
    position: absolute; 
    content: ''; 
    width: 0; 
    height: 0; 
    border: .5em solid transparent; 
    border-left-color: gray; 
    transform-origin: 0 50%; 
    transition: transform .25s; 
    left: 190px; 
}