Jquery Show/Hide of DIV not working

Question

I have a problem, which I hope can be solved..

$(".front").click(function(){
    $('.front').css("display","none");
    $('.back').slideDown('fast');
});
$(".back").click(function(){
    $(".back").hide();
    $(".front").slideDown("fast");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cat">
<a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image</a>
<a id="iconblock" class="back iconblock" style="display: none;">text content</a></div>

<div class="cat">
<a id="iconblock" class="front iconblock" style="background-image: url(dewfgdf.png);">image2</a>
<a id="iconblock" class="back iconblock" style="display: none;">text content2</a></div>

<div class="cat">
<a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image3</a>
<a id="iconblock" class="back iconblock" style="display: none;">text content3</a></div>

Eventhough I am using classes instead of ID's all blocks are flipped on click.. If use $(this).find the display of the original content does not work?

Does anyone has any solution?

Best Regards

instead of `$('.front').css("display","none");` use `$('.front').hide();` — guradio, Oct 28 '15 at 11:02
what do you want it to do? all should be individual? So if you click image only that one will change and not the other two? If so then the fact you are using class and not ids is why. jQuery class selector will select all elements with that class. — Dhunt, Oct 28 '15 at 11:04

Yeldar Kurmangaliyev · Accepted Answer · 2015-10-28T11:06:27.137

5

You simply need to use this.

$(this).hide() will hide only the clicked item.
$(this).siblings('.back').slideDown('fast'); will find a sibling item of class .back and slide down it, not affecting other .back elements.

Working demo:

$(".front").click(function() {
    $(this).hide();
    $(this).siblings('.back').slideDown('fast');
});
$(".back").click(function() {
    $(this).hide();
    $(this).siblings('.front').slideDown('fast');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cat">
<a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image</a>
<a id="iconblock" class="back iconblock" style="display: none;">text content</a></div>

<div class="cat">
<a id="iconblock" class="front iconblock" style="background-image: url(dewfgdf.png);">image2</a>
<a id="iconblock" class="back iconblock" style="display: none;">text content2</a></div>

<div class="cat">
<a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image3</a>
<a id="iconblock" class="back iconblock" style="display: none;">text content3</a></div>

edited Oct 28 '15 at 11:06

answered Oct 28 '15 at 11:04

Yeldar Kurmangaliyev

33,467
12
59
101

`$(this).siblings('.front'` on `.back` click – Guruprasad J Rao Oct 28 '15 at 11:04
1

@GuruprasadRao Thanks! Oh, that copy-paste... :) – Yeldar Kurmangaliyev Oct 28 '15 at 11:05
Thanks for a very quick help. It works perfectly... I knew it was something very simple.. I was trying from closest to parents selector and nothing would work.. – Maja Jelen Oct 28 '15 at 11:19
1

@MajaJelen, By the way, `$(this).siblings('.front')` wili choose the same items as `$(this).parent().children('.front')`. However, it is pointless in this specific case :) – Yeldar Kurmangaliyev Oct 28 '15 at 11:22
Thanks :) Everything works fine except that while in loop this animation is moving and displacing elements arround it.. Any solutions for that? – Maja Jelen Oct 28 '15 at 11:50
@MajaJelen Unfortunatelly, that's how it should work. You hide an item, and browsers moves all other items. Then, you show another one and it moves everything again. You can try to play with opacity. Check this article out: http://stackoverflow.com/questions/6324957/jquery-hide-a-div-without-disturbing-the-rest-of-the-page – Yeldar Kurmangaliyev Oct 28 '15 at 12:03

score 1 · Answer 2 · answered Oct 28 '15 at 11:05

$(".front").click(function() {
 $(this).hide();
 $(this).next('.back').slideDown('fast');
});
$(".back").click(function() {
 $(this).hide();
 $(this).prev('.front').slideDown('fast');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cat">
<a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image</a>
<a id="iconblock" class="back iconblock" style="display: none;">text content</a></div>

<div class="cat">
<a id="iconblock" class="front iconblock" style="background-image: url(dewfgdf.png);">image2</a>
<a id="iconblock" class="back iconblock" style="display: none;">text content2</a></div>

<div class="cat">
<a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image3</a>
<a id="iconblock" class="back iconblock" style="display: none;">text content3</a></div>

Jquery Show/Hide of DIV not working

2 Answers2