I have to hide my parent span just above <a> tag and show the span just below it.(When clicking it on the <a> tag).

I need to use getParent() because their are another same <div>s repeating

My HTML is

<div class="Test">
  <p class="mentBody">
    <span class="view_more-ment">abcd...
      <a class="view_more_link" href="javascript:void(0);" onclick="$(this).getParent().getNext().style.display='';$(this).getParent().style.display='none';">more</a>
    </span>
    <span class="view_more" style="display: none;">abcdefghijklmnopqrstuvwzyz...
      <a class="view_less_link" onclick="$(this).getParent().getPrevious().style.display='';$(this).getParent().style.display='none';">less</a>
    </span>
  </p>
</div>

I have to hide my parent span just above <a> tag and show the span just below it.(When clicking it on the <a> tag).

I need to use getParent() because their are another same <div>s repeating

My HTML is

<div class="Test">
  <p class="mentBody">
    <span class="view_more-ment">abcd...
      <a class="view_more_link" href="javascript:void(0);" onclick="$(this).getParent().getNext().style.display='';$(this).getParent().style.display='none';">more</a>
    </span>
    <span class="view_more" style="display: none;">abcdefghijklmnopqrstuvwzyz...
      <a class="view_less_link" onclick="$(this).getParent().getPrevious().style.display='';$(this).getParent().style.display='none';">less</a>
    </span>
  </p>
</div>

When I use this console shows the error

Uncaught TypeError: $(...).getParent is not a function

Any method to solve this problem?.

• javascript
• jquery
• html

3 Answers 3

There is no getParent() in jQuery. Use:

onclick="$(this).parent().prev().show(); $(this).parent().hide();"

Docs

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

I'd remend you to use on for event handling and not inline handlers

EDIT

Using jQuery:

$('.view_less_link').on('click', function() {
    $(this).closest('.mentBody').find('.view_more-ment').show();
    $(this).parent().hide();
});

Use .parent() instead of getParent().

Update your html as below and keep a similar class for both the links

DEMO

<span class="view_more-ment more">abcd...
     <a class="view_link " href="javascript:void(0);">more</a>
</span>
<span class="view_more less" style="display: none;">abcdefghijklmnopqrstuvwzyz...
     <a class="view_link" href="javascript:void(0);">less</a>
</span>

and then this JS

$('.view_link').on('click',function(){
   $(this).parent().slideToggle(200); 
   $(this).parent().siblings().slideToggle(200); 
});