TalkPHP - Help with jQuery

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - Help with jQuery (http://www.talkphp.com/javascript-ajax-e4x/4592-help-jquery.html)

Help with jQuery

I've just started looking at JQuery today and I have made the following 'simple' script to play with:

html4strict Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#hidefixtures').click(function(event){
                event.preventDefault();
                $('#fixtures').slideUp("slow");
            });
        }); 
    </script>
</head>
<body>
<div id="hidefixtures">
    <a href="">Hide/Show</a>
</div>

<div id="fixtures">
    <table width="200px" border="1px" cellpadding="3px">
        <tr>
            <td align="center" colspan="3">Date</td>
        </tr><tr>
            <td>Home team</td>
            <td>v</td>
            <td>Away team</td>
        </tr>
    <table>
</div>

<div>
    <a href="">Hide/Show something else</a>
</div>
</body>
</html>

Basically there are three elements. 1 & 3 are little links. I want element 2 to be hidden when element 1 is clicked, and then reshown when element 1 is clicked again.

This is the first time I have looked at JQuery (or any kind of JScript) so any help would be appreciated.

With the script at the minute, it hides element 2 but also element 3 which I don't want it to do.

The following code is using toggle effect and is not tested, but I believe it should work:

HTML Code:

<script type="text/javascript">

$(document).ready(function(){

    $('#hidefixtures').click(function(){

        $('#fixtures').toggle();

    });

});

</script>

You can also make it appear/disappear during an animation, adding a speed to the toggle() function:

HTML Code:

$('#fixtures').toggle('slow');

Let me know if it works the way intended.

Yours, Runar

That's great! But when I click element 1, it still toggles elements 2 & 3, whereas I just want it to hide element 2 and leave element 3 in place.

Thanks,

Your HTML must be broken and/or not what was posted above. Element 3 must be contained within Element 2 for it to be hidden when the link is clicked.

Speaking of your HTML. I suggest you read this article about a phenomena called Div Mania.

In short, you should not overuse div elements but instead use CSS selectors (classes and ids). Take a look at my example:

Your way:

HTML Code:

<div id="hidefixtures">

    <a href="">Hide/Show</a>

</div>

The correct way:

HTML Code:

<a href="" id="hidefixtures">Hide/Show</a>

The same applies to your table. Of course, if you are planning of having more than one element inside the hidefixtures id container, then please use a div element, but not in a case like this.

Yours, Runar

Ok, bearing in mind this JQuery is all new to me today how would I go about doing this?

I have 2 or more elements that have the same features (click to hide, click to show). Each element also has within it a click to show even more info, and then click to hide more info (using toggle function.

The thing is, the code is starting to get repetative - there must be a way to eliminate some of the code? Here's what I have....

for my javascript in the head section:

javascript Code:

$(document).ready(function(){
    // Hide the info element by default
    $('#fixinfo').toggle();
    
    // Provides function show/hide elements
    $('#hidefixtures').click(function(event){
        event.preventDefault();
        $('#fixtures').toggle("slow");
    });
    $('#showfixinfo').click(function(event){
        event.preventDefault();
        $('#fixinfo').toggle("slow");
    });
    
    // Hide the info element by default
    $('#resinfo').toggle();
    
    // Provides function show/hide elements
    $('#hideresults').click(function(event){
        event.preventDefault();
        $('#results').toggle("slow");
    });
    $('#showresinfo').click(function(event){
        event.preventDefault();
        $('#resinfo').toggle("slow");
    });
});

and for each HTML element:

HTML Code:

<div class="wrapper">

        <h1 id="hideresults" class="toggle">Recent Results</h1>



        <div id="results">

                <p>Test</p>

                

                

                <p id="showresinfo" class="toggle" class="p">

                        <a href="">More info</a>

                </p>



                <p id="resinfo" class="p">

                        <b>Type:</b> Friendly<br />

                        <b>Venue:</b> Home<br />

                        <b>Kick-Off:</b> 10:30<br />

                        <b>Score:</b> 3 - 2

                </p>

        </div>

</div>

HTML Code:

<div class="wrapper">

        <h1 id="hidefixtures" class="toggle">Upcoming Fixtures</h1>



        <div id="fixtures">

                <p>Test</p>

                

                

                <p id="showfixinfo" class="toggle" class="p">

                        <a href="">More info</a>

                </p>



                <p id="fixinfo" class="p">

                        <b>Type:</b> Friendly<br />

                        <b>Venue:</b> Home<br />

                        <b>Kick-Off:</b> 10:30

                </p>

        </div>

</div>

I'm sure you'll agree it's a bit tedious, especially the more elements I add! Any help appreciated :-)

Your elements may have the same features, but they are still not exactly the same. I am not sure if you can use the same function to toggle a div container and a child element of that div.

jQuery is not my best field either, so I will have to pass it on to someone else. Instead, I will give you a few more tips when it comes to HTML:

If you want to display a list, use the list element. It comes in two variations: ul (unordered lists) and ol (ordered lists). The main list element (ul or ol) works as a container, with several child elements (li) inside.

Your code would for example look like this:

HTML Code:

<ul id="resinfo" class="p">

        <li><strong>Type:</strong> Friendly</li>

        <li><strong>Venue:</strong> Home</li>

        <li><strong>Kick-Off:</strong> 10:30</li>

        <li><strong>Score:</strong> 3 - 2</li>

</ul>

Read more about lists here: http://htmldog.com/guides/htmlbeginner/lists/

Also, if you wish to apply more than one class to an element, simply enter the classes inside the same attribute:

HTML Code:

<h1 class="first-class second-class">Lorem ipsum</h1>

HTML Dog is a great place to learn the basics of HTML and CSS, and how they work together.

Yours, Runar

Thanks for the tips on HTML but I got that under my belt (I think ;-)). That script was just a quick mock-up to play around with JQuery.

Thanks for your help though :-) - anybody else?

You could stop the repeated JavaScript by making use of appropriate classes (on which to hook events, animations, etc.) rather than referencing individual elements by ID.

For example:

JavaScript Code:

// Shorthand equivalent to: jQuery(document).ready(…);
jQuery(function($){

    // Hide the "more info" blocks
    $('.more-info').hide();
    
    // "more info" links toggle "more info" blocks
    $('.more-toggle').toggle(function(e){
        e.preventDefault();
        $(this).text("Less info")
            .parent().next(".more-info").show("slow");
    }, function(e){
        e.preventDefault();
        $(this).text("More info")
            .parent().next(".more-info").hide("slow");
    });
    
});

Assuming your HTML blocks are like (note they're changed a bit from yours above):

HTML Code:

<div class="wrapper">

        <h1>Recent Results</h1>

        <div id="results">

                <p>Test</p>

                <p id="showresinfo">

                        <a href="" class="more-toggle">More info</a>

                </p>

                <p id="resinfo" class="more-info">

                        <b>Type:</b> Friendly<br />

                        <b>Venue:</b> Home<br />

                        <b>Kick-Off:</b> 10:30<br />

                        <b>Score:</b> 3 - 2

                </p>

        </div>

</div>

The functions (…parent().next…) are traversing the document to get from the link to the element to be shown/hidden.