Home/ Questions/Q 888885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T13:28:33+00:00

Since my cell phone apparently doesn’t support JQuery , but does run the simple

  • 0

Since my cell phone apparently doesn’t support JQuery, but does run the simple Javascript tests I have done, how can I convert the following JQuery code into standard Javascript?

All I need this to do is have basic click-to-hide / click-to-show functionality.

<!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="javascript/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("div > div.question").mouseover(function() {
                    if($(this).next().is(':hidden')) {
                        $(this).next().show();
                    } else {
                        $(this).next().hide();
                    }
                });    
            });        
        </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.</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>

Worked!

Thanks bobince!

alt text
(source: deviantsart.com)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I haven’t got a NetFront to test this on, but, trying to keep it relatively unflashy to hopefully avoid broken browser features:

    window.onload= function() {
    var divs= document.getElementsByTagName('div');
    for (var i= divs.length; i-->0;)
        if (divs[i].className==='question')
            Toggler(divs[i]);
};

function Toggler(div) {
    var state= false; // assume initially hidden
    var toggled= div.nextSibling;
    while (toggled.nodeType!==1)
        toggled= toggled.nextSibling; // find next element sibling

    div.onclick= function() {
        state= !state;
        toggled.style.display= state? 'block' : 'none';
    };
};

    I made it use the click event rather than toggling on every mouseover, which seemed a bit strange (and unlikely to work on a mouseless phone).

    (Incidentally, avoid purely numeric id attribute values. It’s not valid and can cause odd behaviours.)

    • 0