Topic: Urgent Help Required Regarding JavaScript plzzzz

I have two links on my page and I want to show different divs on each click in the same position..
Let me explain it
Suppose we have two links

Link1
Link2

When I click on link 1 a div appear infront of it
whn i click link 2 the first div must hide and the 2nd div should replace the first one

How can I do this using javascript
plz let me knw the solution if u knw

Re: Urgent Help Required Regarding JavaScript plzzzz

See how to do that with jQuery: http://api.jquery.com/hide/

Re: Urgent Help Required Regarding JavaScript plzzzz

his will not work in my case...
suppose i have 10 links ... how i can hide the rest if click on 1
i tried it  its not working for me
each lik has its own id, and each dive has its own id ...  how can i pass id of the link and div to jquery

Re: Urgent Help Required Regarding JavaScript plzzzz

Try this:

$(function(id){
  $('div:not(#id)').hide();
});

Re: Urgent Help Required Regarding JavaScript plzzzz

I have a script plz have a look at it
the problem in this script is whn i click a link it shows me a div but it hides the links div
<script>
  jQuery(document).ready(function(){
    jQuery(".links").click(function () {
      var id = this.name;
      jQuery("#"+id).show("slow").siblings().hide("slow");
    });
  });
</script>

Re: Urgent Help Required Regarding JavaScript plzzzz

Here is the html

<div style="width:220px; min-height:154px; margin-right: 20px; border-style:solid; border-width:thin; border-color:#A7C5F8;float:left">
   <% if @g && !@g.nil? %>
    <ul style="list-style:none outside none">
     <% for group in @g %>
      <% @grp = GroupPermission.find(:first, :conditions =>["group_id=? AND user_id=?",group.id, params[:uid]])%>
        <li>
          <% if (controller.controller_name == "people" and (controller.action_name == "edit" or controller.action_name == "update")) %>
            <%= check_box_tag "groups_check[]", group.id , @grp ? true : false %>
          <% else %>
            <%= check_box_tag "groups_check[]", group.id %>
          <% end %>
          <a id="group_<%= group.id %>" class="links" name ="group_permissions_<%= group.id%>"><%= group.name %></a>
        </li>
      <% end %>
    </ul>
   <% else %>
    <em> No Groups found.</em>
   <% end %>
  </div>





   <div id="group_permissions_<%= group.id %>" style=" margin-left:200px;display:none; width:340px; border-style:solid; border-width:thin; border-color:#A7C5F8;float:left">
        <table style="border-collapse: collapse; border-spacing: 0">
          <tbody>
            <tr style="margin-left:10px; border-bottom:1px solid #888;margin-bottom:5px">
              <td style="vertical-align:middle">
                <span>
                  <%# check_box_tag 'all' %>&nbsp;&nbsp;
                  <span style="color: black; font-weight:bold; position:relative; bottom: 2px;">All</span>
                </span>
              </td>
              <td align="center" style="padding-left:10px; padding-right:10px; width:60px;">
                <span style="color: black; font-size:smaller">Read/Write</span>
              </td>
              <td align="center" style="padding-left:10px;padding-right:10px;width:60px;">
                <span style="color: black; font-size:smaller">Read Only</span>
              </td>
              <td align="center" style="padding-left:10px;padding-right:10px;width:60px;">
                <span style="color: black; font-size:smaller">None</span>
              </td>
            </tr>
            <tr>
              <td style="width:105px; padding-left:3px">Meetings</td>
              <td style="text-align:center"><%= radio_button_tag 'group_meetings_permissions', '1' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_meetings_permissions', '2' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_meetings_permissions', '3' %></td>
            </tr
            <tr style="background-color:#FFFFFF">
              <td style="width:105px; padding-left:3px">Action Items</td>
              <td style="text-align:center"><%= radio_button_tag 'group_items_permissions', '1' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_items_permissions', '2' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_items_permissions', '3' %></td>
            </tr>
            <tr>
              <td style="width:105px; padding-left:3px">People</td>
              <td style="text-align:center"><%= radio_button_tag 'group_users_permissions', '1' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_users_permissions', '2' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_users_permissions', '3' %></td>
            </tr>
            <tr style="background-color:#FFFFFF">
              <td style="width:105px; padding-left:3px">Items Summary</td>
              <td style="text-align:center"><%= radio_button_tag 'group_items_sum_permissions', '1' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_items_sum_permissions', '2' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_items_sum_permissions', '3' %></td>
            </tr>
            <tr>
              <td style="width:105px; padding-left:3px">Calendar</td>
              <td style="text-align:center"><%= radio_button_tag 'group_cal_permissions', '1' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_cal_permissions', '2' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_cal_permissions', '3' %></td>
            </tr>
            <tr style="background-color:#FFFFFF">
              <td style="width:105px; padding-left:3px">Gantt Chart</td>
              <td style="text-align:center"><%= radio_button_tag 'group_chart_permissions', '1' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_chart_permissions', '2' %></td>
              <td style="text-align:center"><%= radio_button_tag 'group_chart_permissions', '3' %></td>
            </tr>
          </tbody>
        </table>
      </div>