純粋なJavaScriptで詳細を表示/ less

Question

私は純粋なjavascriptとCSSで簡単にもっと多くの例を読む必要があります。このjQueryの例を純粋なJavascriptに変換するにはどうすればよいですか？ https://jsfiddle.net/ngaffer/s75zj385/2/

ページに複数の長い段落が生成されています。スクロールを最小限に抑えるためにページを短くするために、各段落の大半を隠し、リンクを「もっと読む」ようにしたい。リンクがクリックされると、ボタンは隠しテキストを表示し、リンクを「less less」に変更します。

<section> 
    <div class="content hideContent"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    </div> 
    <a class="show-more" href="#">Show more</a> 
</section> 

<section> 
    <div class="content hideContent"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
    </div> 
    <a class="show-more" href="#">Show more</a> 
</section> 

<script> 
$("a.show-more").on("click", function() { 
    var $this = $(this); 
    var $content = $this.prev("div.content"); 
    var linkText = $this.text().toUpperCase();  

    if(linkText === "SHOW MORE"){ 
     linkText = "Show less"; 
     $content.switchClass("hideContent", "showContent", 400); 
    } else { 
     linkText = "Show more"; 
     $content.switchClass("showContent", "hideContent", 400); 
    }; 

    $this.text(linkText); 
}); 
</script> 

<style> 
.hideContent { 
    overflow: hidden; 
    line-height: 1em; 
    height: 2em; 
} 
.showContent { 
    line-height: 1em; 
    height: auto; 
} 
</style> 

Answer 1

このような変換はあまり時間がかかりません。

Hereは、共通のjqueryコードをプレーン（バニラ）のjavascriptに置き換える方法を知る上で非常に便利なリソースです。

同時に、私はnew fiddleであなたのjavascriptを修正する自由を取った。

var click_event = function() { 
    var linkText = this.innerHTML.toUpperCase(); 
    if (linkText === "SHOW MORE") { 
     this.innerHTML = "Show less"; 
     this.previousElementSibling.classList.remove("hideContent"); 
     this.previousElementSibling.classList.add("showContent"); 

    } 
    else { 
     this.innerHTML = "Show more"; 
     this.previousElementSibling.classList.remove("showContent"); 
     this.previousElementSibling.classList.add("hideContent"); 
    } 
}; 

var elements = document.getElementsByClassName("show-more"); 

for (var i = 0; i < elements.length; i++) { 
    elements[i].addEventListener('click', click_event, false); 
} 

このコードは、vanilla JSのすべての基本機能を実装しています。しかし、私は400msの時間遅れを除外しました。これはあなたが作業するための非常に興味深い練習になると思います。私はこれが将来の出来事に役立つことを願っています。ここで

Answer 2

は、クラスやアニメーションCSSのトリックをベースアンカーを選択し、純粋なJSコードです：

var anchrorClassShow=document.getElementsByTagName('a'); 
 
for(var i=0;i<anchrorClassShow.length;i++){ 
 
    if(anchrorClassShow[i].className!=='show-more'){  
 
    anchrorClassShow[i].remove(); 
 
    } 
 
} 
 

 

 
    
 
for(var i=0;i<anchrorClassShow.length;i++){ 
 
    anchrorClassShow[i].addEventListener('click', function(){ 
 
    var parentDiv=this.parentElement; 
 
    if(parentDiv.children[0].className.match(/hideContent/g)){ 
 
    parentDiv.children[0].className='content showContent'; 
 
    }else{ 
 
    parentDiv.children[0].className='content hideContent'; 
 
    } 
 
}); 
 
}

.hideContent { 
 
    max-height: 2em; 
 
    transition: max-height 0.15s linear; 
 
    overflow: hidden; 
 
    background: #d5d5d5; 
 
    
 
} 
 
.showContent { 
 
    max-height: 500px; 
 
    transition: max-height 0.35s linear; 
 
    
 
}

<section> 
 
    <div class="content hideContent"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
    </div> 
 
    <a class="show-more" href="#">Show more</a> 
 
</section> 
 

 
<section> 
 
    <div class="content hideContent"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 
    </div> 
 
    <a class="show-more" href="#">Show more</a> 
 
</section>