How to show hidden div of another page after redirecting

Question

hi i am redirecting one page to another...here is my code

 <div class="dash-mdt-details l2">
 <div class="dash-md-tab-row l2 pull-right">
 <a href = "modules.html">   <i class="ico-charcoaldash pull-left">&nbsp;</i>Network 1
 </a> </div>
  <div class="dash-md-tab-row l2 pull-right">
  <a href = "modules.html">   <i class="ico-charcoaldash pull-left">&nbsp;</i>Network 2
    </a>  </div>
    </div>

It is succesfully redirected in modules.html but i want to redirected it at particular hidden tag

this is hidden tag which i want to open directly from modules.html

 <div class="dash-mdt-details l1" style="display:none; margin-top: 30px;">
  <div class="module-row module-tab module-details pull-right" style="font-weight:bold;">
            <b>Details:</b><br>
<div id="module-tab-details" style="color:#cc0000;padding-left:10px;background-color: #f7f7f7;border-top: solid 1px #000000;">
                   Network connection disconnected
    </div>
    <div class="module-tabs-details-description pull-right" style="width: 95%;display: block;">
                     <b>Suggested steps:</b><br>
             <ol style="color:Orange; font-weight=bold;">
             <li><div style="color:black";>Step one to resolve the issue. Try this one first!</div></li>
                                                                <li><div style="color:black";>Second Step to resolve the issue. Try this one first!</div></li>
                                                            </ol><br>
                                                            <img src="images/icons/icon-charcoalarrow.png"> <a href="" data-toggle="modal" data-target="#commentBox">Add Comments &nbsp; <img src="images/icons/icon-chat.png"></a><br>
                                                            <img src="images/icons/icon-charcoalarrow.png"> <a href="" data-toggle="modal" data-target="#fetchData">Update / Test Data</a><br>&nbsp;<br>
                                                        </div>
                                                        <span class="grey-line"></span>
                                                    </div>
                                                </div>

what should i do to show the content of the hidden tag directly after the redirect?

Answer 1

You don't need Javascript here. Can pull it off with just CSS:

1. Give an id to your target div in modules.html , say divId ,
2. Add a :target style to your CSS in modules.html ,
3. Change the relevant link to <a href="modules.html#divId">

CSS (for modules.html):

#divId:target {
    display: block;
}

Note : It is advisable to not have embedded styles. So in your case it would be better if you could move your display:none; margin-top: 30px; display:none; margin-top: 30px; style to the main CSS of that page.

Answer 2

NOTE: See @abhitalks answer. It is better.

I'm going to go out on a limb here and assume:

1. When you say "redirect" you mean "link". (Are you actually redirecting? Or do you just mean you click the "Network 1" link and it goes to modules.html ?)
2. When you say "hidden tag" you mean the <div> that is hidden ( display: none; )

And therefore, what you're asking is:

How can I show the hidden div immediately when I link to the page?

If that is what you mean, you can do this:

First: Change your link to <a href="modules.html#show">...</a>

Second: Put a little javascript on the modules.html page:

$(document).ready({
   if (window.location.hash == "#show") {
      $(".dash-mdt-details").show();
   }
});

This will check the url to see if it has the #show on the end. If it does, it will show the hidden div .

Note: You can change #show to anything you want. Just change it in both places. You can also target different elements by passing different #whatever in each link.

Answer 3

You need to pass DOM information in query string.like this:

modules.html?showele=dash-mdt-details

and on dom ready in page 2, show the hidden element and scroll to that element using:

$("."+$.url().param('showele')).show();
$('html,body').animate({scrollTop: $(".'+$.url().param('showele')+'").offset().top},'slow');