Toggle between two
tag by clicking a link form their inside

Question

I am learning jquery and java scripts but still not good enough with it . I am trying to make a toggle Effect but unable to make it happen . so I am asking here if this can be possible . HERE is WHAT I what :

I have Two div inside a Div : Link for js Fiddle :http://jsfiddle.net/saifrahu28/zzju3/2/

What I am trying to make is : Firstly When the page loads the Blue Div should Display and Green should be hiding . And Whenever I click any of the 3 link inside he Blue Div Green Div Should appear and Blue Div Should Hide . And Same for the Green also , when clicking in the link in side the Green Div should Open Blue div and Hide the Green . Is this possible ?

Here is he Code:

HTML

<div style="width:300px; height:200px; background:#FFC;">
   <div class="blueDiv">
    <a>Click Me to Hide Blue Div 1</a>
            <a>Click Me to Hide Blue Div 2</a>
            <a>Click Me to Hide Blue Div 3</a>
   </div>

   <div class="GreenDiv">
     <a>Click Me to Hide Green Div and Show Blue Div Div</a>
   </div>
</div>

CSS

.blueDiv{


width:200px;
height:100px;
background:#09F;
}

.GreenDiv{
 width:250px;
 height:150px;
 background:#0C9;
}  

a{ text-decoration:none;
cursor:pointer;
font-size:10px;

 }

Ay chance you can show us the JavaScript you're currently using? — johnkavanagh, Jun 03 '13 at 14:50
Actually I can make only toggle effect like click a link then Show and Hide Div . I guess this is not that useful for everyone . — S Raihan, Jun 03 '13 at 14:54
Are you planning to have multiple blue/green `div` elements? — David Thomas, Jun 03 '13 at 14:58
http://stackoverflow.com/questions/4936715/how-to-toggle-between-two-divs — Ciro Santilli OurBigBook.com, Oct 27 '14 at 14:22

score 2 · Answer 1 · answered Jun 03 '13 at 14:58

2

$('a').click(function () {
    $(this).parent().hide().siblings().show();
});

http://jsfiddle.net/Spokey/zzju3/4/

answered Jun 03 '13 at 14:58

Spokey

10,974
2
28
44

Excellent ! This what I am exactly trying to make . Thanks you Very much . – S Raihan Jun 03 '13 at 15:00

score 1 · Answer 2 · answered Jun 03 '13 at 14:57

You could try this:

$(function(){
  var blueDiv = $('.blueDiv');
  var greenDiv = $('.GreenDiv').hide();

  blueDiv.find('a').click(function(){
      blueDiv.hide();
      greenDiv.show();
  });
  greenDiv.find('a').click(function(){
      greenDiv.hide();
      blueDiv.show();
  });
});

UPDATE: Added working JS Fiddle

score 0 · Answer 3 · answered Jun 03 '13 at 14:57

http://jsfiddle.net/zzju3/3/

$('.blueDiv').click(function() {
                $('.blueDiv').hide();
            });

$('.GreenDiv').click(function() {
                $('.GreenDiv').hide();
        $('.blueDiv').show();
            });

Here you go. The rest you can try around what you can do with it.

score 0 · Answer 4 · answered Jun 03 '13 at 14:58

I'm not sure why you have three <a> tags in the bluediv but this should work. Be aware this $('a') selector grabs all anchor tags so this may cause issues with other parts of your code (if you have multiple anchor tags on the page). it may be worth adding a class to all the a tags you wish use for this functionality and then grabbing them like so $('.myAnchorClass')

$(document).ready(function(){
   $('a').click(function(){  //Attach click event function to each anchor tag
       if($(this).closest('div').hasClass('GreenDiv')){
           $('.blueDiv').show();
       }  else {
           $('.GreenDiv').show();
       }
       $(this).closest('div').hide();
   });
});

Toggle between two tag by clicking a link form their inside

4 Answers4

Toggle between two
tag by clicking a link form their inside