StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJQuery Swapping the Toggle of elements, one at a time
primarykey
Id
1165512
data
AcceptedAnswerId
1165609
AnswerCount
6
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2009-07-22T14:04:50.247
FavoriteCount
1
LastActivityDate
2011-11-09T17:01:26.943
LastEditDate
LastEditorUserId
0
OwnerUserId
142870
ParentId
0
PostTypeId
1
Score
0
ViewCount
3619
LastEditorDisplayName
text
Body
<p>I'm new to JQuery and I'd like to know if you've got any idea regarding how to accomplish the following with JQuery instead of JScript:</p> <p>You have a group of a's within a top div:</p> <pre><code><h3> <a id="acer" href="#acerca">acerca</a> | <a id="cur" href="#cursos">cursos y clases</a> | <a id="cal" href="#calendario">calendario</a> | <a id="con" href="#contacto">contacto</a> </h3> </code></pre> <p>And below them, inside the same container div, there's four content divs, one after the other, each belonging to each of the a's above:</p> <pre><code><div id="acerca"></div> <div id="cursos"></div> <div id="calendario"></div> <div id="contacto"></div> </code></pre> <p>Now, the idea here is that we start off by closing all of these content div's but one, the first: acerca, which is visible to the user:</p> <pre><code>$(document).ready(function(){ $("#cursos,#calendario,#contacto").hide(); }); </code></pre> <p>Now, using the h3 a's at the top, I want the following behaviour to take place:</p> <p>1.- If I click a different item than the one open by default (acerca), then close the currently open one and show me the new one. 2.- If I click the same item which is already open (acerca), then nothing happens: there must always be one content div open at all times. 3.- If possible, using #anchors to mask the ugly "javascript:;" of the old days.</p> <p>This is very simple with the use of JavaScript's onclick function (save for #3) but, I'm somehow getting stuck with JQuery. </p> <p>Help is greatly appreciated Sotkra</p>
Tags
<jquery><toggle><javascript><swap>
Title
JQuery Swapping the Toggle of elements, one at a time
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USSotkra
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POJQuery Swapping the Toggle of elements, one at a time
  UserUserId
  USBrian Blumenthal
  VoteTypeVoteTypeId
  VTFavorite
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.