我正在创建一个产品登陆网页销售乐器…现在，我希望我的页面显示一个按钮来显示更多内容。但在我的例子中，页面并不只有文本。我想添加一个div标签来显示更多内容。我读过各种各样的文章，但它们只适用于文本。
#product-info {
margin-top: 10px;
font-family: 'Cinzel', serif;
background: linear-gradient(0deg,
rgba(123,67,151,1) 0%,
rgba(220,36,48,1) 100%);
align-items: center;
height: 220rem;
padding-top: 100px;
}
/* FOR GUITAR */
#guitarbox {
display: flex;
float: right;
justify-content: center;
margin: 40px;
border-radius: 20px;
background-color: rgb(237, 244, 199);
transition: 1s;
border-radius: 20px;
}
#guitarbox:hover {
background-color: #bebebe;
}
#guitarcontent {
margin: 30px;
padding-top: 20px;
}
#guitarbox img {
border-radius: 0px 20px 20px 0px;
}
/* GUITAR END */
/* FOR KEYBOARD */
#keyboardbox {
display: flex;
float: right;
justify-content: center;
margin: 40px;
border-radius: 20px;
background-color: rgb(237, 244, 199);
transition: 1s;
border-radius: 20px;
}
#keyboardcontent {
margin: 30px;
padding-top: 20px;
}
#keyboardbox:hover {
background-color: #bebebe;
}
#keyboardbox img {
border-radius: 0px 20px 20px 0px;
}
/* KEYBOARD END */
/* FOR VIOLIN */
#violinbox {
display: flex;
float: right;
justify-content: center;
margin: 40px;
border-radius: 20px;
background-color: rgb(237, 244, 199);
transition: 1s;
border-radius: 20px;
}
#violinbox:hover {
background-color: #bebebe;
}
#violincontent {
margin: 30px;
padding-top: 20px;
}
#violinbox img {
margin-right: 0;
border-radius: 0px 20px 20px 0px;
}
/* VIOLIN END */
/* FOR CELLO */
#cellobox {
display: flex;
float: right;
justify-content: center;
margin: 40px;
border-radius: 20px;
background-color: rgb(237, 244, 199);
transition: 1s;
border-radius: 20px;
}
#cellobox:hover {
background-color: #bebebe;
}
#cellocontent {
margin: 30px;
padding-top: 20px;
}
#cellobox img {
border-radius: 0px 20px 20px 0px;
}
/* CELLO END */<section id="product-info" class="product-info">
<b>Here are the instruments that our brand serves: </b>
<div class="guitar">
<div id="guitarbox">
<div id="guitarcontent">
<h1>Guitar</h1><hr>
<p>
An electric guitar is a guitar that requires
external amplification in order to be heard at
typical performance volumes, unlike a standard
acoustic guitar. It uses one or more pickups to
convert the vibration of its strings into
electrical signals, which ultimately are
reproduced as sound by loudspeakers.
</p>
</div>
<div id="guitarimg">
<a href="https://en.wikipedia.org/wiki/Electric_guitar" target="_blank">
<img src="/images/electric-guitar.jpg" width="500px">
</a>
</div>
</div>
</div>
<div class="keyboard">
<div id="keyboardbox">
<div id="keyboardcontent">
<h1>Keyboard</h1><hr>
<p>
A musical keyboard is the set of adjacent depressible
levers or keys on a musical instrument.
Keyboards typically contain keys for playing the
twelve notes of the Western musical scale, with a
combination of larger, longer keys and smaller,
shorter keys that repeats at the interval of an octave.
</p>
</div>
<div id="keyboardimg">
<a href="https://en.wikipedia.org/wiki/Musical_keyboard" target="_blank">
<img src="/images/keyboard2.png" width="500px">
</a>
</div>
</div>
</div>
<div class="violin">
<div id="violinbox">
<div id="violincontent">
<h1>Violin</h1><hr>
<p>
The violin, sometimes known as a fiddle, is a
wooden chordophone (string instrument) in the
violin family. Most violins have a hollow wooden
body. It is the smallest and thus highest-pitched
instrument (soprano) in the family in regular use.
</p>
</div>
<div id="violinimg">
<a href="https://en.wikipedia.org/wiki/Violin" target="_blank">
<img src="/images/violin.jpg" width="500px">
</a>
</div>
</div>
</div>
<div class="cello">
<div id="cellobox">
<div id="cellocontent">
<h1>Cello</h1><hr>
<p>
The cello (/ˈtʃɛloʊ/ CHEL-oh; plural celli or
cellos) or violoncello (/ˌvaɪələnˈtʃɛloʊ/ VY-ə-lən-CHEL-oh;
Italian pronunciation: [vjolonˈtʃɛllo]) is a
bowed (sometimes plucked and occasionally hit)
string instrument of the violin family.
</p>
</div>
<div id="celloimg">
<a href="https://en.wikipedia.org/wiki/Musical_keyboard" target="_blank">
<img src="/images/cello2.jpeg" width="500px">
</a>
</div>
</div>
</div>
</section>这里，我想把div放在键盘的下面
我试着参考了各种网站，但找不到解决方案:(
@Alok Marathe。请检查以下代码以解决您的问题。有很多关于堆栈溢出的代码，为你提供了如何显示更多功能的想法。
他们会给你一个例子，你需要做的就是实现它。
这是堆栈溢出链接，你的代码在下面。
堆栈溢出
jQuery(document).ready(function ($) {
//this will execute on page load(to be more specific when document ready event occurs)
if ($('.product-info-box').length > 2) {
$('.product-info-box:gt(1)').hide();
$('.showmore').show();
}
$('.showmore button').on('click', function () {
//toggle elements with class that their index is bigger than 2
$('.product-info-box:gt(1)').toggle();
//change text of show more element just for demonstration purposes to this demo
$(this).text() === 'Show less' ? $(this).text('Show more') : $(this).text('Show less');
});
});/* Just For Example No Need */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Your CSS */
#product-info {
margin-top: 0;
font-family: "Cinzel", serif;
background: linear-gradient(0deg, rgba(123, 67, 151, 1) 0%, rgba(220, 36, 48, 1) 100%);
align-items: center;
height: initial;
padding-top: 100px;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
/* FOR GUITAR */
#guitarbox {
display: flex;
float: right;
justify-content: center;
margin: 40px;
border-radius: 20px;
background-color: rgb(237, 244, 199);
transition: 1s;
border-radius: 20px;
}
#guitarbox:hover {
background-color: #bebebe;
}
#guitarcontent {
margin: 30px;
padding-top: 20px;
}
#guitarbox img {
border-radius: 0px 20px 20px 0px;
}
/* GUITAR END */
/* FOR KEYBOARD */
#keyboardbox {
display: flex;
float: right;
justify-content: center;
margin: 40px;
border-radius: 20px;
background-color: rgb(237, 244, 199);
transition: 1s;
border-radius: 20px;
}
#keyboardcontent {
margin: 30px;
padding-top: 20px;
}
#keyboardbox:hover {
background-color: #bebebe;
}
#keyboardbox img {
border-radius: 0px 20px 20px 0px;
}
/* KEYBOARD END */
/* FOR VIOLIN */
#violinbox {
display: flex;
float: right;
justify-content: center;
margin: 40px;
border-radius: 20px;
background-color: rgb(237, 244, 199);
transition: 1s;
border-radius: 20px;
}
#violinbox:hover {
background-color: #bebebe;
}
#violincontent {
margin: 30px;
padding-top: 20px;
}
#violinbox img {
margin-right: 0;
border-radius: 0px 20px 20px 0px;
}
/* VIOLIN END */
/* FOR CELLO */
#cellobox {
display: flex;
float: right;
justify-content: center;
margin: 40px;
border-radius: 20px;
background-color: rgb(237, 244, 199);
transition: 1s;
border-radius: 20px;
}
#cellobox:hover {
background-color: #bebebe;
}
#cellocontent {
margin: 30px;
padding-top: 20px;
}
#cellobox img {
border-radius: 0px 20px 20px 0px;
}
/* CELLO END */
/* Custom CSS */
/* Fixed div height */
.product_info_scroll {
}
/* Not Necessary */
.showmore {
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="product-info" class="product-info">
<b>Here are the instruments that our brand serves: </b>
<!-- This div for making fixed height of show content -->
<div class="product_info_scroll">
<div class="guitar product-info-box">
<div id="guitarbox">
<div id="guitarcontent">
<h1>Guitar</h1>
<hr>
<p>
An electric guitar is a guitar that requires
external amplification in order to be heard at
typical performance volumes, unlike a standard
acoustic guitar. It uses one or more pickups to
convert the vibration of its strings into
electrical signals, which ultimately are
reproduced as sound by loudspeakers.
</p>
</div>
<div id="guitarimg">
<a href="https://en.wikipedia.org/wiki/Electric_guitar" target="_blank">
<img src="/images/electric-guitar.jpg" width="500px">
</a>
</div>
</div>
</div>
<div class="keyboard product-info-box">
<div id="keyboardbox">
<div id="keyboardcontent">
<h1>Keyboard</h1>
<hr>
<p>
A musical keyboard is the set of adjacent depressible
levers or keys on a musical instrument.
Keyboards typically contain keys for playing the
twelve notes of the Western musical scale, with a
combination of larger, longer keys and smaller,
shorter keys that repeats at the interval of an octave.
</p>
</div>
<div id="keyboardimg">
<a href="https://en.wikipedia.org/wiki/Musical_keyboard" target="_blank">
<img src="/images/keyboard2.png" width="500px">
</a>
</div>
</div>
</div>
<div class="violin product-info-box">
<div id="violinbox">
<div id="violincontent">
<h1>Violin</h1>
<hr>
<p>
The violin, sometimes known as a fiddle, is a
wooden chordophone (string instrument) in the
violin family. Most violins have a hollow wooden
body. It is the smallest and thus highest-pitched
instrument (soprano) in the family in regular use.
</p>
</div>
<div id="violinimg">
<a href="https://en.wikipedia.org/wiki/Violin" target="_blank">
<img src="/images/violin.jpg" width="500px">
</a>
</div>
</div>
</div>
<div class="cello product-info-box">
<div id="cellobox">
<div id="cellocontent">
<h1>Cello</h1>
<hr>
<p>
The cello (/ˈtʃɛloʊ/ CHEL-oh; plural celli or
cellos) or violoncello (/ˌvaɪələnˈtʃɛloʊ/ VY-ə-lən-CHEL-oh;
Italian pronunciation: [vjolonˈtʃɛllo]) is a
bowed (sometimes plucked and occasionally hit)
string instrument of the violin family.
</p>
</div>
<div id="celloimg">
<a href="https://en.wikipedia.org/wiki/Musical_keyboard" target="_blank">
<img src="/images/cello2.jpeg" width="500px">
</a>
</div>
</div>
</div>
</div>
<div class="showmore">
<button type="button">Show More</button>
</div>
</section>