Как я могу добавить toggle в этот html-код

Я написал несколько html и css-код, чтобы показать вопрос и ответ на страницу faq, но я хочу дать ему эффект переключения. Когда вы нажимаете на вопрос, он должен открыть раздел ответа по этому конкретному вопросу. Вот HTML код:Как я могу добавить toggle в этот html-код

<div id="faq_content"> 
    <div class="title"> 
     <strong>FAQs</strong><br> 
    </div> 
    <div class="answer_visible"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span> consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
    <div class="answer_hidden"> 
     <div type="button" class="q_button" onclick=""> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
     <i class="fa fa-angle-up"></i>     
     <i class="fa fa-angle-down"></i>     
     </div> 
     <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
</div>

источник

2015-10-21 user3443037

добавить CSS тоже .... –

Я добавил УСБ и его внешний вид, как это в настоящее http://prntscr.com/8tkubj – user3443037

Вы можете добавить CSS тоже в вашем вопросе? –

Установите display класса ответа на none. Теперь нам нужно отобразить ответ, когда пользователь нажимает на элемент с классом fa-angle-down и скрывает его, когда пользователь нажимает на элемент с классом fa-angle-up. Вот решение jQuery.

$('.fa-angle-down').click(function(){ 
    $(this).parent().parent().find('.answer').hide(); 
}); 

$('.fa-angle-up').click(function(){ 
    $(this).parent().parent().find('.answer').show(); 
});

источник

2015-10-21 05:50:24

Вы можете использовать JQuery UI для этого https://jsfiddle.net/d176L8x3/

HTML

<div id="accordion"> 

    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h3> 
    <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div> 

    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h3> 
    <div class="answer"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 
    </div> 

    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h3> 
    <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div> 

    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </h3> 
    <div class="answer"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div> 

</div>

$(function() { 
    $("#accordion").accordion(); 
});

Подробнее ЗДЕСЬ https://jqueryui.com/accordion/#default

источник

2015-10-21 05:53:33

I S ольвел. Я добавил этот код JQuery и его работу большого

jQuery(document).ready(function(){ 
jQuery(".answer_hidden").click(function(){ 
jQuery(this).find(".answer").toggle(); 
jQuery(this).toggleClass("answer_visible"); 

     }); 
});

источник

2015-10-21 05:59:04 user3443037

-1

ли, как это.

<div class="answer_visible"> 
    <div type="button" class="q_button" data-id="firstdiv1" onclick="showanswer(this)"> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit? </span> 
    <i class="fa fa-angle-up"></i>     
    <i class="fa fa-angle-down"></i>     
    </div> 
    <div class="answer" id="firstdiv1"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </div>

Вот код JavaScript

funtion showanswer(element){ 
var id=$(element).attr('data-id'); 
$('#'+id).toggle(); 

}

источник

2015-10-21 06:02:33 Shaniawan

здесь стыковой кнопка ID и 1А ответить Div ID

$("#butt").on('click', function (e) { 

    $("#1A").toggle(); 

});

http://jsfiddle.net/8tn9h5cu/3/

источник

2015-10-21 06:44:59

проверка here на JSfiddler

Добавлен текст в случае увеличения & кнопка вниз. как показано ниже

<i class="fa fa-angle-up">imgup</i>     
<i class="fa fa-angle-down">imgdown</i>

источник

2015-10-21 07:43:14

Как я могу добавить toggle в этот html-код

ответ

Смежные вопросы