アコーディオンデータを新しいデータでリフレッシュ/リロード/更新する方法は？

Question

ユーザーが入力を入力したときのように、ボタンクリックで新しい値でアコーディオンデータを更新する方法を教えてもらえますか？

のように入力ボックスがあります。ユーザーが値を与えた後に送信します。それと同時に、ユーザーがサイドアコーディオンで入力したものを表示する必要があります。

アコーディオンを持っています何

/Latest update 
/old updates 
/etc 

として分類することでしょ活字体、jQueryのかさえAngular2

の共有フィドル/ plunkerスニペットあれば、それは多くのおかげで良いだろう

$("className").click(function(){ 
setInterval(function(){     
      }, 900);  
    }) 
    <div classname="className"></div> 

です任意のヘルプのため

Answer 1

私はいくつかの自由時間を作ったのであなたは私があなたが望むと思うものの例です。

1.enter 'AA' latest updates意志slideDownとテキスト 'AA' を持つことになりますテキスト 'AA' 第二の値latest updatesは、テキスト 'BB' を持つことになります 'BB' 2.enter

、old updatesを持っており、また、 「AA」は「AA」を持つことになりますテキスト「BB」とアーカイブを持っています

3番目の値 latest updatesは、テキスト「CC」を持つことになります「CC」3.enter

、old updatesをアーカイブし、「BB」

のでれますに。

これは、非常に単純なtext().lengthを使用するIF条件を使用して行われます。

も含ま

が、これはあなたが探していたものであるなら、私に知らせて、簡単なアコーディオンコード（JQの先頭に）。

var accTrigger = $('h2') 
 
$(".text").hide() 
 
$("h2").on("click", function() { 
 
    var text = $(this).siblings(".text") 
 
    if ($(text).is(":visible")) { 
 
    $(text).slideUp() 
 
    } else { 
 
    $(text).slideDown() 
 
    } 
 
    $(this).parents(".accordion-item").siblings().find(".text").slideUp() 
 
}); 
 

 

 
var button = $("button"), 
 
    input = $("input"), 
 
    latest = $("#latest .text"), 
 
    old = $("#old .text"), 
 
    archive = $("#archive .text") 
 

 

 

 
$(button).on("click", function() { 
 
    inputValue = $(input).val() 
 

 
    if ($(latest).text().length > 0) { 
 
    $(old).text($(latest).text()).slideDown() 
 

 
    } 
 
    if ($(old).text().length > 0) { 
 
    var aText = $(archive).html() 
 
    $(archive).html(aText + '<br>' + $(old).text()).slideDown() 
 
    } 
 
    $(latest).text(inputValue).slideDown() 
 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <div class="accordion-item" id="latest"> 
 
    <h2>Latest Updates</h2> 
 
    <div class="text"></div> 
 
    </div> 
 
    <div class="accordion-item" id="old"> 
 
    <h2>Old Updates</h2> 
 
    <div class="text"></div> 
 
    </div> 
 
    <div class="accordion-item" id="archive"> 
 
    <h2>Archive</h2> 
 
    <div class="text"></div> 
 
    </div> 
 
</div> 
 

 
<input type="text" value=""> 
 
<button type="submit"> 
 
    submit value 
 
</button>