Like the title states, I'm creating a "FAQ" section in my website where people can click an glyphicon and it will show text. Here is my code
<div class="tab-content">
<div id="home" class="tab-pane fade in active ">
<h3>Product Specs</h3>
<ul id="questions">
<li><span id="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
<li id="subtext">While we have created templates for you to use as a starting point, if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
</ul>
</div>
</div>
when the user clicks the <span id="symbol"> it will show/hide the
<li id="subtext">
You can simply use:
$("li:nth-child(odd) span#symbol").click(function () {
$(this).closest("li").next("li").toggle();
});
There's something fundamentally wrong if you are using multiple ids. The ids are meant to be unique.
So my proposal is, please change them into classes. By that way, if you do, you can do something like:
$(function () {
$(".subtext").hide();
$("li:nth-child(odd) .symbol").click(function () {
$(this).closest("li").next("li").toggle();
});
});<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="tab-content">
<div id="home" class="tab-pane fade in active ">
<h3>Product Specs</h3>
<ul id="questions">
<li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
<li class="subtext">While we have created templates for you to use as a starting point, if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
<li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
<li class="subtext">While we have created templates for you to use as a starting point, if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
<li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
<li class="subtext">While we have created templates for you to use as a starting point, if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
<li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
<li class="subtext">While we have created templates for you to use as a starting point, if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
<li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
<li class="subtext">While we have created templates for you to use as a starting point, if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
<li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
<li class="subtext">While we have created templates for you to use as a starting point, if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
<li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
<li class="subtext">While we have created templates for you to use as a starting point, if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
</ul>
</div>
</div></div>