Click one div to hide a different div

Question

There's a lot of tutorials about hide/show functions in jQuery but can't find any regarding my issue. I'm not new to programming, jquery is a first for me.

I would like it when a user clicks on "link 1" etc...it hides the word "hide me" below. Currently it partially works, but it only hides the actual link...not the "hide me" word. I know it's to do with a selector...but not sure where to put the selector in.

Thanks.

Simple js fiddle

$(document).ready(function(){
//user clicks on link
    $('a').click(function(){
         //hides the word below link but doesn't work
        $(this).hide();
    });


});

I've tried

 $(this).hide("panel");

and

  $("panel", this).hide();

Thanks

Can you clarify if you want to hide the entire clicked `.column` or just the link and the `.box`? — Huangism, Mar 25 '15 at 14:31

Mox Shah · Answer 1 · 2015-03-25T14:46:56.067

Its not working because, when you say $(this) it will take object of clicked element only and that's anchor tag:

use this:

$(this).closest("div").hide();

Instead of

$(this).hide();

Help your self: try:

console.log($(this));

//This will show what does that $(this) take:

Update:

Based, on your html structure, You can use something like this:

$(this).parent().next().hide()

DEMO

$(document).ready(function(){
    $('a').click(function(){
   
         $(this).parent().next().hide();
    });
   
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
 <div id="wrap">
  <div id="main">
   
   
   <div class="row">
    <div class="column">
     <p><a href="#" title="Click me!">Link 1</a></p>
    
     <div class="box">
      <p>Hide me</p>
     </div>
    </div>
    
    <div class="column">
     <p><a href="#" title="Click me!">Link 2</a></p>
    
     <div class="box">
      <p>Hide me</p>
     </div>
    </div>
    
    <div class="column">
     <p><a href="#" title="Click me!">Link 3</a></p>
    
     <div class="box">
      <p>Hide me </p>
     </div>
    </div>
   </div>
  </div>
 </div>

Thanks but it hides both of them. I only want the word below it hidden. — Superunknown, Mar 25 '15 at 14:34
@MokshShah clarified in comments, can you update your answer to it — Huangism, Mar 25 '15 at 14:36

score 3 · Accepted Answer · answered Mar 25 '15 at 14:32

3

Change:

$(this).hide();

to:

$(this).parent().next('.box').hide();

$(this) is hiding what you're clicking

answered Mar 25 '15 at 14:32

StudioTime

22,603
38
120
207

score 2 · Answer 3 · edited Mar 25 '15 at 14:36

2

What about:

$(this).closest('.column').find(".box").hide();

edited Mar 25 '15 at 14:36

Huangism

16,278
7
48
74

answered Mar 25 '15 at 14:29

blablabla

1,468
15
17

The parent of the anchor is a paragraph tag – Huangism Mar 25 '15 at 14:30
Ok forgot that one. Then closest is better. (parent().parent() isn't pretty) – blablabla Mar 25 '15 at 14:31

score 1 · Answer 4 · answered Mar 25 '15 at 14:29

please look at what panel stands for. in this

$("panel").hide();

you are trying to hide all tags that aare panel try using id

$("#panel").hide();

or class name

$(".panel").hide();

or if this is a child node of "this" read in https://api.jquery.com/children/

adricadar · Answer 5 · 2015-03-25T14:42:02.833

1

You can achieve this with closest function and hide childrens with .box class. Jsfiddle demo based on your code.

$(document).ready(function(){
    $('a').click(function(){
        $(this).closest('.column').children('.box').hide();
    });  
});

edited Mar 25 '15 at 14:42

answered Mar 25 '15 at 14:29

adricadar

9,971
5
33
46

Click one div to hide a different div

5 Answers5