On mouse click, hide the link and show

Question

When the mouse click, I need to hide the link and show another div.

<div class="fetch-from-link">
 <a href="#" class="test" onClick="$(this).parent().hide();">
  Fetch from link
</a>

<div class="hello">Hello world</div>
</div>

I just use simple hide method. But how can I show my "hello" div after the link hide?

Answer 1

Since jQuery is used bind the event handler using it instead of ugly inline click handler.

You need to hide() the current element, then Class Selector ('.hello') can be used to display the other div.

 jQuery(function($) { $('.test').click(function(e) { e.preventDefault(); $(this).hide(); $('.hello').show(); }) }); 

 .hello { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fetch-from-link"> <a href="#" class="test">Fetch from link</a> <div class="hello">Hello world</div> </div> 

---

As per current HTML, you can use .next()

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

jQuery(function($) {
   $('.test').click(function(e) {
      e.preventDefault();
       $(this).hide().next().show();
   })
});

Answer 2

You can use the following code:

 $(function() { $('.test').click(function() { $('.test').hide(); $('.hello').show(); }); }) 

 .hello { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fetch-from-link"> <a href="#" class="test">Fetch from link</a> <div class="hello">Hello world</div> </div> 

Answer 3

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fetch-from-link"> <a href="#" class="test" onClick="$(this).parent().hide();$('.hello').show();"> Fetch from link </a> </div> <div class="hello" style="display: none; ">Hello world</div> 

You must move the div outside because you are hiding the div containing your "Hello world" text.

Answer 4

<div class="fetch-from-link">
 <a href="#" class="test" onClick="$(this).hide().siblings('.hello,.second-class,.third-class').show();">
  Fetch from link
</a>

<div class="hello">Hello world</div>
</div>

You are hiding the whole div containing both the elements. Hide link only.