简体   繁体   中英

How to target a url to display; block when default is display; none

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM