faq toggle div show / hide +更改链接文本

时间:2013-08-15 07:58:15

标签: javascript css toggle show-hide

我观看/阅读/搜索了许多教程,但没有运气。 我坚持使用this tutorial

我正在尝试使用JS(可能仅限CSS)来应用toogle acordion效果而不将目标添加到div。

有两个显示内容的选项:

  1. 一个问题打开/其他关闭
  2. 每个问题可以分开打开/关闭
  3. 我不介意,你选择哪个选项来解决这个问题。

    无法更改 ID元素的任何属性(例如id =“div1”,id =“div2”,...)

    我的目标是制作图片中的内容: preview

    HTML:

        <div class="widget widgetFaq clearfix">
    
        <div class="widgetTitle"> 
            <h2>FAQ</h2> 
        </div>   
    
        <div class="widgetContent clearfix">   
    
            <div class="box boxFaq clearfix">                  
    
                <div class="boxTitle">
                    <h3>Question one?</h3>
                    <button> show </button>
                </div>
    
                <div class="boxContent clearfix toggle">                     
                    <p>Answer to the question. Answer to the question. Answer to the question. </p>
                </div>
    
            </div>  
    
            <div class="box boxFaq clearfix">                  
    
                <div class="boxTitle">
                    <h3>Question second?</h3>
                    <button> show </button>
                </div>
    
                <div class="boxContent clearfix toggle">                     
                    <p>Answer to the question. Answer to the question. Answer to the question. </p>
                </div>
    
            </div>  
    
        </div>   
    
    </div>   
    

    我的尝试JS:

       $(document).ready(function(){ 
        $('button').click(function() {
            $(this).next('.toggle').slideToggle();
        });
    });
    

    的jsfiddle:

    JsFiddle example

    解:

    (将<button>show</button>放在boxTitle div之后)

    代码:

    $(document).ready(function() {
    $('button').click(function() {
        $(this).next('.toggle').slideToggle();
    
        if ($(this).text() === '+') {
            $(this).html('-');
        }
        else {
            $(this).html('+');
        }
    });
    

    });

1 个答案:

答案 0 :(得分:0)

$(this).parent().next('.toggle').slideToggle();