jQuery show / hide

Question

Can i user jquery to show / hide a specific div on another page?

i.e. i have Content.aspx that shows content for different plans we offer.

on detail.asp i have a more detailed page that hase unique divs.

<div id="detail-a">
     detailed content here for product A.
</div>

<div id="detail-b">
     detailed content here for product B.
</div>

i dont want the show hide box to scroll to show the rest of the page detailed content... if that all makes sense...

Answer 1

You can set the div to display:none. Like:

$("#mydiv").css( "display", "none");

EDIT: I haven't really tested this, but couldn't you just start each div as display:none and on your link to the new window add a hash like: mypage.htm/#detail1.

then in that page on document ready get the location.href and set the display for that element back as detailed above.

This isn't an answer, just an untested suggestion. There may very well be a more elegant solution to this.

Answer 2

Possible duplicate of Showing and hiding a div with jQuery and/or Using JQuery to show and hide different div's onClick event.

Selecting an element by ID in jquery is $('#idname') and show/hide are simply .show() and .hide() so for your elements

$('#detail-a').show();
$('#detail-b').hide();

Attached to some event trigger of course.

Answer 3

If I am reading this correctly, you are wanting links on one page to send the user to a second page and, on that second page, show or hide specific divs dependent on which link the user clicked on the first page.

On Contents.aspx

<a href="details.asp#detail-a">See Detail A</a>
<a href="details.asp#detail-b">See Detail B</a>

On details.asp

<div id="detail-a">
  Data on Detail A
</div>
<div id="detail-b">
  Data on Detail B
</div>
<script type="text/javascript">
$( document ).ready( function(){
  /* If there is a Hash and the Hash is an ID on this page */
   if( document.location.hash && $( document.location.hash ) ) {
    /* Hide all the Detail DIVs */
     $( 'div[id^="detail-"]' ).not( document.location.hash ).hide();
    /* Show the Specified Detail DIV */
     $( document.location.hash ).show();
   }
} );
</script>