Hidding text with jQuery is break

  • stephanekapi

    (@stephanekapi)


    10 years, 10 months ago

    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="http://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)
  • esmi

    (@esmi)

    10 years, 10 months ago

    This is not how you should be implementing .js in WordPress. See http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    Thread Starter stephanekapi

    (@stephanekapi)

    10 years, 10 months ago

    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="http://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)

    10 years, 10 months ago

    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.