I inherited a site coded as below using jquery to designate an expander function to toggle major sections of the site open from default closed position (src expand images are little colored arrows).
The sections are closed by default using “display: none;” and major sections have minor sections nested within them similarly toggled closed by default.
The basic structure is below.
The toggling on the site works fine – sections are closed by default but toggle between open and closed by clicking on headers. Now I would like to provide URLs that will “display: block;” for the URL target using hashtags to subsections (such as “mainpageurl#policy1” in the example below). The hashtags don't work – the URL will simply go to the main page with all sections closed; will not open the target.
Can anyone provide a simple solution? Is it possible without completely rewriting the code? Maybe this is a classic example of when not to use display; none?
<!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$jq(function() {
$jq(".expander").click(function(){
$jq(this).next('div').toggle();
});
});
<h1 class="expander"><src-arrow-image-here /><a> Policies</a></h1>
<div id="policies" style="display: block;">
<h2 class="expander"><src-arrow-image-here /><a> Policy 1</a></h2>
<div id="policy1" style="display: none;">
<p>Content - this is the first policy.</p>
</div>
<h2 class="expander"><src-arrow-image-here /><a> Policy 2</a></h2>
<div id="policy2" style="display: none;">
<p>Content - this is another policy.</p>
</div></div>
Javascript solution would be parsing window.location.hash
and jQuery show()
targeted element after page content is loaded.
window.location.hash
will get us the hash parameter from the URL, you can use it to toggle the relevant section like this:
const sectionID = window.location.hash; // will give sectionID with hashtag.
$(sectionID).show()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.