jquery show next div, hide current span?

0
votes

When I click a link I want the next DIV to show, but the current SPAN to hide. I can get the next div showing, but I'm strugging with hiding the current span. Here's my code:

jquery:

$(".post").hide();
$(".hide,.show").show();

$('.show').click(function() {
    $(this).next('div').slideToggle();
    <Hide current span here, how?>
    return false;
    });

html:

<span class=lowrated>Low-rated post hidden. <a href="#" class="show">Show</a></span>

<div class="post">post goes here</div>
3
jqueryhtml

3 Answers

0
votes

the span is the parent of the .show class a element.

$(this).parent().slideToggle(); //or .hide() or .css("display","none")
0
votes

Add the following:

$(this).parent().hide();

or

$(this).closest('span').hide();

Note that you'll also need to use either .parent() or .closest('span') with the code you have to make the div show since the link has no next element:

$(".post").hide();
$(".hide,.show").show();

$('.show').click(function() {
  $(this).parent().next('div').slideToggle();
  $(this).parent().hide();
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class=lowrated>Low-rated post hidden. <a href="#" class="show">Show</a></span>

<div class="post">post goes here</div>
0
votes

$(this).next('div') should not work either, since there's no sibling div.

$('.show').click(function() {
    $(this).closest('span').hide().next('div').slideToggle();
    return false;
});