Trouble with javascript click function

Question

Using the following code, when a menu item is clicked it loads the content from an external html file. When I click through each menu item, the content from each external html file stays on the page. How can I make it so that as I click through, only the content from the clicked menu item is displayed?

<script type="text/javascript">
        $(function(){
            $("#accordion1").click(function(evt){
                $("#course1").load("course1.html")
                evt.preventDefault();
            })

            $("#accordion2").click(function(evt){
                $("#course2").load("course2.html")
                evt.preventDefault();
            })

            $("#accordion3").click(function(evt){
                $("#course3").load("course3.html")
                evt.preventDefault();
            })
        })
    </script>

<div id="content">
            <div id="course1">
            </div>
            <div id="course2">
            </div>
            <div id="course3">
            </div>
        </div>

Gras Double · Accepted Answer · 2011-10-07 02:52:43Z

1

You could simply empty the other elements, using $().empty(), but I think a better solution would be to toggle visibility, using something like $().toggleClass('hiddenCourse') and a display:none CSS associated with this class.

Also, as fetching files each time would be really slow responsive, and network demanding, you should consider remembering which files have already been fetched and included into the DOM.

An alternative would be to have all content ready at page load, so the only remaining task would be the visibility toggling. It depends on a a lot of parameters: if the sum of content is big (files' size and number), if you prefer a lightspeed responsive app in trade of a slower startup, the number of sections the visitor is likely to open, and so on.

answered Oct 7, 2011 at 2:52

Gras Double

16.5k9 gold badges61 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user912695 · Accepted Answer · 2011-10-07 02:21:29Z

0

Remove the content of the other divs when loading an html file.

answered Oct 7, 2011 at 2:21

user912695

Comments

Daniel Little · Accepted Answer · 2011-10-07 02:24:45Z

0

It looks like you want something like the Accordion UI effect

Have a look here, that way you only need to load the content once. http://docs.jquery.com/UI/API/1.8/Accordion

Also calling $('#id').empty(); will remove content.

answered Oct 7, 2011 at 2:24

Daniel Little

17.3k12 gold badges74 silver badges94 bronze badges

Comments

Michael Berkowski · Accepted Answer · 2011-10-07 02:24:57Z

If I understand, you want to clear out the other <div>s:

<script type="text/javascript">
    $(function(){
        $("#accordion1").click(function(evt){
            $("#course1").load("course1.html");
            $("#course2").empty();
            $("#course3").empty();
            evt.preventDefault();
        })

        $("#accordion2").click(function(evt){
            $("#course2").load("course2.html");
            $("#course1").empty();
            $("#course3").empty();
            evt.preventDefault();
        })

        $("#accordion3").click(function(evt){
            $("#course3").load("course3.html");
            $("#course1").empty();
            $("#course2").empty();
            evt.preventDefault();
        })
    })
 </script>

Ben · Accepted Answer · 2011-10-07 02:25:40Z

0

You could either:

load a empty URL in the other divs before loading the new content
Remove the content of all divs before loading the new content
Leave the content but use CSS to hide the divs that will not have a click event

answered Oct 7, 2011 at 2:25

Ben

13.7k4 gold badges51 silver badges70 bronze badges

Collectives™ on Stack Overflow

Trouble with javascript click function

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related