CODEWITHSUNDEEP
jqueryhtmlcss
Khadesa
Khadesa

Reputation: 91

hide 'read more' and 'show less' tags

I can't figure out why my 'read more' and 'show less' won't toggle display.

I have multiple instances of the read more tag, here is the script that handles this:

<script>
(function($) {
$('.showcontent').click(function(e) {
    $( this ).parent().next( '.cdscontainer' ).show();
     $( this).parent().next( '.showcontent').hide();
      $( this).parent().next('.hidecontent').show();

});
$('.hidecontent').click(function(e) {
    $( this ).parent('.cdscontainer').hide();
     $( this).parent().next('.hidecontent').hide();
      $( this).parent().next( '.showcontent').show();
});
})( jQuery );
 </script>

The site is www.kingkongco.com.au/c-cor/about-us (under the staff pics)

Thanks for any help/suggestions!

Upvotes: 0

Views: 551

Answers (2)

Charantej Golla
Charantej Golla

Reputation: 598

You can replace next('p') to next('.cdscontainer ')

$('.showcontent').click(function(){
  $(this).hide();
  $(this).parent().next('p').show();
})
$('.hidecontent').click(function(){
  $(this).parent().hide();
  $('.showcontent').show();
})
.cdscontainer {
    display: none;
  margin-top:-18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="description">As General Manager,Volker is responsible for Engineering, Professional Services and day-to-day ef cient operations of the business including manufacturing, technical…<br>
<a class="showcontent">Read more…</a></p>
<p class="cdscontainer">…and engineering services, process management<br>
and professional services delivery.<br>
Recently, Volker was with Grass Valley USA, LLC where he held a technical leadership role as Regional Operations Manager AsiaPacific.<br>
In 1993 he was a commercial and technical manager for the original Foxtel/Telstra CATV Rollout as part of Philips (Koninklijke Philips N.V.).<br>
In this role he led vendor management for over 100 OEM vendors supplying Connectivity Equipment, Active Equipment and installation materials for the Telstra HFC Cable Network infrastructure rollout.<br>
Significantly, he established service platforms for post-rollout support of the Telstra HFC Cable Network. Volker also project managed the Telstra Digital Video Network rollout program.<br>
A highly capable executive with over 28-years professional experience in radio, telecommunications, broadband and television broadcast technologies.<br>
Volker has extensive experience in system engineering, project management and delivery of professional services.<br>
Volker was awarded a Graduate Diploma of Technology Management (Deakin University) and a Bachelor of Engineering – Electrical (Swinburne University of Technology).<br>
<a class="hidecontent">…Hide Content</a></p>

Upvotes: 1

Tyler Burki
Tyler Burki

Reputation: 197

To start things off, four of your lines do nothing:

$( this).parent().next( '.showcontent').hide();
$( this).parent().next('.hidecontent').show();

and

$( this).parent().next('.hidecontent').hide();
$( this).parent().next( '.showcontent').show();

Take a look at the description of jQuery's next function. In the first case, you'll be selecting the element directly after .showcontent's parent, which is .cdscontainer. Both

$(this).parent().next('.showcontent')

and

$(this).parent().next('.hidecontent')

will be empty sets since the next element after .showcontent's parent has neither one of those classes. Therefore, your .show() and .hide() will do nothing since there is no element to act upon.

Now, to get this to work they way that you want it to, you'll need to change the first set of bad lines to

$(this).hide(); //this is .showcontent
$(this).parent().next().find('.hidecontent').show(); //Need to find the .hidecontent element since it is a child of parent's next element

Although you can omit the second line altogether as .hidecontent is hidden/shown based upon the visibility of .cdscontainer anyway.

The second set of bad lines can then be changed to

$(this).hide(); //this is .hidecontent, but, as above can be omitted since .cdscontainer is hidden
$(this).parent().prev().find('.showcontent').show(); //Need to go to the parent's previous element and find child .showcontent since it appears in the DOM before .hidecontent

Now, that should get you where you want to be, but be careful with this sort of setup. You're basing your functionality an awful lot on the structure of your HTML. Should the markup ever change, and parents/children aren't the same, you could see this break.

Upvotes: 0

Related Questions