Clash Royale CLAN TAG#URR8PPP

how to hide/show tag a after click on it that is outside of a div which become hidden and shown

I have some html code with below structure. when I click on tag a with "moreCases" class,div with class "container-cases" is become show and when I click on "lessCases" div with class "container-cases" is become hide but tag a with "moreCases" do n't become show.how I can solve it?

HTML:

<a href="#!" class="moreCases show">more 1</a>
<div class="container-cases hide">
<input type="text" />
<a href="#!" class="lessCases">less 1</a>
</div>


JavaScript:

$(document).ready(function ()
$(".moreCases").each(function ()
var more = $(this);
more.click(function ()
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
);
);
$(".lessCases").each(function ()
var less = $(this);
less.click(function ()
less.parent().removeClass('show').addClass('hide');
less.prev(".moreCases").removeClass('hide').addClass('show');
);
);
);


3 Answers
3

You have to target the parent() before using prev():

parent()

prev()

less.parent().prev(".moreCases").removeClass('hide').addClass('show');


$(document).ready(function ()
$(".moreCases").each(function ()
var more = $(this);
more.click(function ()
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
);
);
$(".lessCases").each(function ()
var less = $(this);
less.click(function ()
less.parent().removeClass('show').addClass('hide');
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
);
);
);

.hide
display: none;

.show
display: block;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#!" class="moreCases show">more 1</a>
<div class="container-cases hide">
<input type="text" />
<a href="#!" class="lessCases">less 1</a>
</div>

Remove the last .addClass('hide')

.addClass('hide')

$(".moreCases").each(function ()
var more = $(this);
more.click(function ()
more.next().removeClass('hide').addClass('show');
more.removeClass('show');
);
);


Working example

There is no need to iterate over the .moreCases & .lessCases instead you can simply add the click event to it. Beside since the click is on an a tag , prevent the default behavior by adding e.preventDefault

.moreCases

.lessCases

a

e.preventDefault

$(document).ready(function()
$(".moreCases").click(function(e)

$(this).next().removeClass('hide').addClass('show');
$(this).removeClass('show').addClass('hide');
);

$(".lessCases").click(function(e)
e.preventDefault();
$(this).parent().removeClass('show').addClass('hide');
$(this).parent().prev(".moreCases").removeClass('hide').addClass('show');

);
);

.hide
display: none;


.show
display: block;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#!" class="moreCases show">more 1</a>
<div class="container-cases hide">
<input type="text" />
<a href="#!" class="lessCases">less 1</a>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.