Go to url then hide/show div
Dears,
HTML code is:
- <a class="first-l">First</a>
- <a class="second-l">Second</a>
- <a class="third-l">Third</a>
- <a class="redirect">redirect to second</a>
-
- <div id="main">
- <div class="first">
- <h1>First</h1>
- <p>Test-1</p>
- </div>
- <div style="display:none;" class="second">
- <h1>Second</h1>
- <p>Test-2</p>
- </div>
- <div style="display:none;" class="third">
- <h1>Third</h1>
- <p>Test-3</p>
- </div>
- </div>
jQuery code is:
- $(document).ready(function() {
-
- $('a.first-l').click (function () {
- $('.first').fadeIn();
- $('.second').fadeOut();
- $('.third').fadeOut();
- });
-
- $('a.second-l').click (function () {
- $('.first').fadeOut();
- $('.third').fadeOut();
- $('.second').css("display", "block" ).fadeIn();
- });
-
- $('a.third-l').click (function () {
- $('.first').fadeOut();
- $('.second').fadeOut();
- $('.third').css("display", "block" ).fadeIn();
- });
-
- });
All I want to do now is:
1- When I click the link "redirect to second", it goes to the above html page then hide the divs "first and third" and just show the div "second".
2- Also, if I have the link "redirect to second" on an out-source page, I want it to do the same (go to the above html page then hide the divs "first and third" and just show the div "second").
Help will be appreciated.
Thanks.