CODEWITHSUNDEEP
javascriptjquerycssjquery-selectors
Maja Jelen
Maja Jelen

Reputation: 223

Jquery Show/Hide of DIV not working

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

Upvotes: 2

Views: 93

Answers (2)

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34199

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>

Upvotes: 5

madalinivascu
madalinivascu

Reputation: 32354

$(".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>

Upvotes: 1

Related Questions