Hidding text with jQuery is break

  • I would appreciate help on understanding what’s wrong. I’ve never used jQuery before. I’m trying to hid text on the team-member’s profiles so that each profile just contains 3-4 lines and then invites to read more (with a slideToggle).

    As you can see on this team-member’s page, I’m fairly happy with how this looks (I would just like the hyperlink to constantly be the highlight color).

    BUT… everything south of the section “Meet the team” is now broken as you can see on the this one-page website.

    The jQuery code on the team-member’s page is definitely what’s breaking the website. The code used is :

    <h4>Staatlich anerkannte Logop?din</h4>
<b>beruflicher Werdegang:</b>
1999 – 2002 Ausbildung zur Logop?din
2002 – 2004 angestellte Logop?din
seit 2004 selbst?ndige Logop?din
<!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>jQuery(document).ready(function(){
  jQuery("#button").click(function(){
    jQuery("#cache").slideToggle();
  });
});</script></head><h5><a id ="button">Weiterbildungen (Klicken)</a></h5>
<body>
<div id="cache" style="display:none;">
? Trachealkanülenmanagement
? ?Intensivkurs – Stimmtherapie für Laryngektomierte“
? ?Gut bei Stimme sein“
? Myofunktionelle Therapie in Theorie und Praxis
? F?rderung der phonologischen Bewusstheit
? Auditive Wahrnehmungsprobleme
? ?Kindliches Stottern in Theorie und Praxis“

Mitglied im <img src="https://greifswald-logopaedie.de/wp-content/themes/hc/images/dbl.png" alt="DBL" />
</div>
</body>
</html>

    For your information. You can see the demo template used here. I don’t know if it helps you debug.

Viewing 3 replies - 1 through 3 (of 3 total)

  • This is not how you should be implementing .js in WordPress. See https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script

    Thread Starter stephanekapi

    (@stephanekapi)

    Hi esmi,

    I’m new at this. Someone pointed out that I was redefining <head> and <body> and that I didn’t need to go calling jQuery from Google.

    So I’m down to this:

    <h4>Staatlich anerkannte Logop?din</h4>
<b>beruflicher Werdegang:</b>
1999 – 2002 Ausbildung zur Logop?din
2002 – 2004 angestellte Logop?din
seit 2004 selbst?ndige Logop?din
<h5><a id ="button">Weiterbildungen (Klicken)</a></h5>
<div id="cache" style="display:none;">
? Trachealkanülenmanagement
? ?Intensivkurs – Stimmtherapie für Laryngektomierte“
? ?Gut bei Stimme sein“
? Myofunktionelle Therapie in Theorie und Praxis
? F?rderung der phonologischen Bewusstheit
? Auditive Wahrnehmungsprobleme
? ?Kindliches Stottern in Theorie und Praxis“

Mitglied im <img src="https://greifswald-logopaedie.de/wp-content/themes/hc/images/dbl.png" alt="DBL" /></div>
<script>jQuery(document).ready(function(){
  jQuery("#button").click(function(){
    jQuery("#cache").slideToggle();
  });
});</script>

    But if you actually go and click on the slideToggle entitled “Weiterbildungen (Klicken)” on the website, it pops down and right back up. I’m a newby. Why is that?

    Thread Starter stephanekapi

    (@stephanekapi)

    I can get the toggle to stay down if I switch from .slideToggle to .slideDown. But I would like the visitors to be able to hide the text again by simply clicking on the toggle.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Hidding text with jQuery is break’ is closed to new replies.