すべてのボタンをクリックすると、2つの機能を切り替えることができます

Question

長いコンテンツがあり、その一部のみを表示したい場合、ユーザーが「もっと読む」をクリックするとコンテンツ全体を表示したいボタンを 'read more'から 'read less'に変更し、 'read less'から 'read more'に変更します。これどうやってするの？ 私は今、私は「読むレス」に「続きを読む」から切り替えることができていますが、私は「読むから切り替える方法になっていない午前、以下

$(document).ready(function(){ 
 
    $("#click-me").on("click", function(){ 
 
    $(this).html("Read Less"); 
 
    $(".content").css("overflow","auto"); 
 
    $(".content").css("height","auto"); 
 
    }); 
 
});

.card{ 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    padding: 20px; 
 
} 
 
.content{ 
 
    overflow: hidden; 
 
    height: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="card"> 
 
    <div class="content"> 
 
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] 
 

 
Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. 
 
    </div> 
 
    <button id="click-me">Read More</button> 
 
</div>

を自分のコードを添付していますより少ない 'を読むことができます。

EDIT：

私は表示する複数のコンテンツを持っている、そして私はもっと読む切り替えると以下を読みたい場合はどのような。私は下に自分のコードを添付している、私は現在のオブジェクトにアクセスするために 'この'オブジェクトを使用していますが、その要素の内容にアクセスする方法を取得していません。あなたの答えのための

$(document).ready(function(){ 
 
    var readMore=true; 
 
    $(".more-less").on("click", function(){ 
 
    var txt=$(this).html(); 
 
    console.log($(this)); 
 
    if(readMore){ 
 
    $(this).html("Read Less"); 
 
    $('.content').css("overflow","auto"); 
 
    $(this).css("height","auto"); 
 
     readMore=false; 
 
    }else{ 
 
    $(this).html("Read More..."); 
 
    $('.content').css("overflow","hidden"); 
 
    $(this).css("height","40px");  
 
     readMore=true; 
 
    } 
 
    }); 
 
});

.card{ 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    padding: 20px; 
 
} 
 
.content{ 
 
    overflow: hidden; 
 
    height: 40px; 
 
} 
 
.more-less{ 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
}

<div class="card"> 
 
    <div class="content"> 
 
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] 
 

 
Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. 
 
    </div> 
 
    <a href="#" class="more-less">Read More...</a> 
 
</div> 
 
<div class="card"> 
 
    <div class="content"> 
 
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] 
 

 
Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. 
 
    </div> 
 
    <a href="#" class="more-less">Read More...</a> 
 
</div>

感謝。

Answer 1

$(document).ready(function(){ 
 
    var readMore=true; 
 
    $(".more-less").on("click", function(){ 
 
    var txt=$(this).html(); 
 
    console.log($(this)); 
 
    if(readMore){ 
 
    $(this).html("Read Less"); 
 
    $(this).parent().find('.content').css("overflow","auto"); 
 
    $(this).css("height","auto"); 
 
     readMore=false; 
 
    }else{ 
 
    $(this).html("Read More..."); 
 
    $(this).parent().find('.content').css("overflow","hidden"); 
 
    $(this).css("height","40px");  
 
     readMore=true; 
 
    } 
 
    }); 
 
});

.card{ 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    padding: 20px; 
 
} 
 
.content{ 
 
    overflow: hidden; 
 
    height: 40px; 
 
} 
 
.more-less{ 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="card"> 
 
    <div class="content"> 
 
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] 
 

 
Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. 
 
    </div> 
 
    <a href="#" class="more-less">Read More...</a> 
 
</div> 
 
<div class="card"> 
 
    <div class="content"> 
 
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] 
 

 
Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. 
 
    </div> 
 
    <a href="#" class="more-less">Read More...</a> 
 
</div>

Answer 2

現在のテキストが何であるかを確認して、もう1つのことを行うことができます。

$(document).ready(function(){ 
    $("#click-me").on("click", function(){ 
    if ($(this).html() === "Read More") { 
     // Change to Read Less 
    } else { 
     // Change to Read More 
    } 

    }); 
}); 

Answer 3

あなたは、同じイベントで異なるクリッカーを持っている属性data-* HTML5を使用することができます。

$("#click-me").on("click", function(){ 
    if ($(this).attr("data-shouldOpen") != "false") { 
     $(this).attr("data-shouldOpen", "false"); 
     open(); // opening code here 
    } else { 
     $(this).attr("data-shouldOpen", "true"); 
     close(); // closing code here 
    } 
}); 

あなたは彼らによって閉じ/オープンする別のdivタグを関連付けることができますボタン。

Answer 4

クラスを持つデリゲートを使用して状態を制御しました。

$(document).ready(function(){ 
 
    $('#read-options') 
 
    .on('click', "#click-me.expanded", function(){ 
 
     $(this).html("Read More").removeClass('expanded'); 
 
     $(".content").css("overflow",""); 
 
     $(".content").css("height",""); 
 
    }).on('click', "#click-me:not(.expanded)", function(){ 
 
     $(this).html("Read Less").addClass('expanded'); 
 
     $(".content").css("overflow","auto"); 
 
     $(".content").css("height","auto"); 
 
    }); 
 
});

.card{ 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    padding: 20px; 
 
} 
 
.content{ 
 
    overflow: hidden; 
 
    height: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="card"> 
 
    <div class="content"> 
 
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] 
 

 
Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. 
 
    </div> 
 
    <span id="read-options"> 
 
    <button id="click-me">Read More</button> 
 
    </span> 
 
</div>

Answer 5

回答は、追加の質問に答えるように更新されました。

これを達成する最も簡単な方法は、追加のCSSクラスを作成してクリックすることです。複数のボタンで機能させたい場合は、HTMLも更新する必要があります。ちょっと

$(document).ready(function(){ 
 
    $(".toggle-more").on("click", function(){ 
 
    $(this).closest(".card").toggleClass("show-more"); 
 
    }); 
 
});

.card { 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    padding: 20px; 
 
} 
 
.card .content { 
 
    overflow: hidden; 
 
    height: 40px; 
 
} 
 
.card.show-more .content { 
 
    overflow: auto; 
 
    height: auto; 
 
} 
 
.card .toggle-more:before { 
 
    content: "Read More"; 
 
} 
 
.card.show-more .toggle-more:before { 
 
    content: "Read Less"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="card"> 
 
    <div class="content"> 
 
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] 
 
    Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. 
 
    </div> 
 
    <button class="toggle-more"></button> 
 
</div> 
 
<div class="card"> 
 
    <div class="content"> 
 
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1] 
 
    Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series. 
 
    </div> 
 
    <button class="toggle-more"></button> 
 
</div>

Answer 6

$(document).ready(function(){ 
    $("#click-me").on("click", function(){ 
    $(this).toggleClass('readLess'); 
    $(".content").toggleClass('hidden'); 
    if($(this).hasClass('readLess')){ 
     $(this).text("Read Less"); 
    }else{ 
     $(this).text("Read More"); 
    } 
    }); 
}); 

.hidden { 
    overflow: auto; 
    height: auto; 
} // add this to your styles