My name is Edward Tanguay. I'm an American software and web developer living and working in Berlin, Germany.
3 hours ago: If you are a developer in Berlin and need to improve your English, I'm looking for groups to teach after work: http://tanguay.info/itenglish.
4 hours ago: As far as I'm concerned, the singularity is already here, every time I wake up twitter tells me something amazing was created while I slept.
4 hours ago: We're not suffering from information overload, we're suffering from faulty filtering.
5 hours ago: Classic literature for free as nicely formatted 1-page or 2-page PDF downloads: http://www.planetebook.com/free-ebooks.asp.
5 hours ago: Yes, when you pour coffee, "a lightning storm of neuronal activity occurs almost across the entire brain": http://is.gd/eWO1T @pholdings.
21 hours ago: If you put two spaces after a period or use underlining for emphasis, you were born before 1980.
22 hours ago: Word of the day: infovore, n. an animal with a voracious appetite for information.
yesterday: It's said that on average people use less than 10% of their brain, but I think on average computers use less than 1% of their CPU.
2 days ago: Saturday fun: team drawing on two computers with six-year-old in a shared google doc diagram.
2 days ago: Someday I want to produce a developer podcast called "What's that?" but for now "the developer's life" is a nice genre: http://is.gd/eTURO.
3 days ago: Here's a use-case for datapod format, recording human-readable data that later can be used as a datasource: http://is.gd/eSsLg @pholdings.

Categories

My Older Tutorials

My Old Web Dev Site

JQUERY CODE EXAMPLE created on Monday, February 01, 2010 permalink
How to make open/close flashcards with JQuery
This example shows you how to make flashcards so that the user can click on the header to open and close them.
> > > View Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript"
        src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.4.0");
            google.setOnLoadCallback(function() {
            $("div > div.question").click(function() {
                if($(this).next().is(':hidden')) {
                $(this).next().fadeIn("slow");
                } else {
                $(this).next().fadeOut("slow");
                }
            });    
            });
    
        </script>
        <style>
            div.flashcard {
                margin: 0 10px 10px 0;
            }
            div.flashcard div.question {
                background-color:#ddd;
                width: 400px;        
                padding: 5px;    
                cursor: hand;    
                cursor: pointer;
            }
            div.flashcard div.answer {
                background-color:#eee;
                width: 400px;
                padding: 5px;    
                display: none;        
            }
        </style>
    </head>

<body>
    <div id="1" class="flashcard">
    <div class="question">Who was Wagner?</div>
    <div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div>
    </div>
    
    <div id="2" class="flashcard">
    <div class="question">Who was Thalberg?</div>
    <div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div>
    </div>
</body>
</html>
need markup?
 

Most Recently Added Items: