As I organize my content into an FAQ format, I want users to be able to click on a link and expand the section to reveal a list of items that can also be expanded individually. My goal is to have certain list items expand automatically when the FAQ section is toggled.
When a user clicks on a link to expand the list of items, I want the content to focus on the specific item related to that link, similar to how a hyperlink anchor works. This content is all located on one page, with a slideToggle effect followed by another slide toggle.
I have created a demo of what I am trying to achieve here: JSFiddle
<h2>To learn more about this specific item, <a href="#" id="clicke">click here!</a>
</h2>
<div id="myHiddenContent" style="display:none">
<li id="info-block-one">
<dl>
<dt>
<a aria-haspopup="true" aria-expanded="true" href="#contentBlock" id="infoLink">
<strong>Info block one</strong></a>
</dt>
<dd tabindex="-1" aria-hidden="false" role="region" style="display: block;">
<p class="answer" id="contentBlock" style="display:none">Info Block Answer</p>
</dd>
</dl>
</li>
$( "#infoLink" ).click(function() {
$( "#contentBlock" ).slideToggle( "slow", function() {
});
});
$( "#clicke" ).click(function() {
$( "#myHiddenContent" ).slideToggle( "slow", function() {
});
});