WordPress.org

Ready to get started?Download WordPress

Forums

Hidding text with jQuery is break (4 posts)

  1. stephanekapi
    Member
    Posted 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.

  2. esmi
    Theme Diva & Forum Moderator
    Posted 10 months ago #

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

  3. stephanekapi
    Member
    Posted 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?

  4. stephanekapi
    Member
    Posted 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.

Reply

You must log in to post.

About this Topic