www.webdeveloper.com
Results 1 to 4 of 4

Thread: Onclick event or something like

  1. #1
    Join Date
    Apr 2011
    Posts
    11

    Onclick event or something like

    Below is the code I am working with, probably a bit messy but I am working on it. I would like to call the div directly below that to extend the box on click of Quick Question in the hover event.

    <body>
    <div class="service-box1">
    <ul id="service-nav">
    <li id="customer_service">
    <div id="cs_style"><a href="HYPERLINK #">Customer Service</a>
    </div>
    <span id="service_menu">
    <div class="service-box2 service-contain2">
    <div class="service-box3">
    <a href="# title="My Profile">My Profile</a></tr>
    <a href="#" title="Product Manuals">Product Manuals</a>
    /---- call div "qq-box1 qq-contain1" on click ----><a href="#" title="Quick Question">Quick Question</a>

    </div>
    </span>
    </li>
    <li>
    </ul>
    </div>
    </div>
    </body>
    </html>


    and here is the the div I wish to call.

    <div class="qq-box1 qq-contain1">
    <div class="qq-box2">
    <h1>Quick Question</h1>
    <div>
    <p>
    <input name="qq_name" type="text" value="name**" class="qq-ne-style" maxlength="100" width="135px" />
    </p>
    <p>
    <input name="qq_email" type="text" value="email" class="qq-ne-style" maxlength="100" />
    </p>

    <textarea name="questionbox" cols="135" rows="300" disabled="disabled" wrap="virtual" class="questionbox-style">your question*</textarea>


    <div>
    <p><a class="btn-1">submit question</a></p></div></br>
    <div> <p class="responsetxt"> * Please allow one full business day for response.</p>
    <p class="accountpoptxt">** If you have a profile abd are logged in, after submitting your question it will populate into the question section of your account."</p></div>
    </div>
    </div>
    </div>
    </div>
    </div>


    I have tried everything I can think of but i am running into a brick wall. Any help would be greatly appreciated.

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    when you say you wish to call the div, what do you mean? and when do you want to fire this call to a div? when a link is clicked ?

  3. #3
    Join Date
    Mar 2010
    Posts
    128
    Woops, I went to edit my post with a modification to the code and I accidentally removed my entire post! Oh well, the code below should give you an understanding on how to create an expand/collapse script. Simply save the code below as whatever.html and test in your browser.

    The original code I posted used get/setAttribute, which doesn't seem to be supported by IE. element.className seems to be the proper way to manipulate the property.

    Code:
    <style>
        .hide{
            display:none;
        }
        .show{
            display:block;
        }
    </style>
    <script>
    function changeClass(element, anchor){
        var element = document.getElementById(element);
        if(element.className == "hide"){
            element.className = "show";
            anchor.innerHTML = "Close Question";
        }
        else{
            element.className = "hide";
            anchor.innerHTML = "Add a Question";
        }
    }
    </script>
    <p>This is some example text...</p>
    <p>
        <a href="javascript:voide(0);" onclick="javascript:changeClass('question', this);">Add a Question</a>
        <div id="question" class="hide">
            <form>
                <input type="text" name="myQuestion" id="myQuestion" value="" />
                <input type="submit" name="submitQuestion" id="submitQuestion" value="Add Question" />
            </form>
        </div>
    </p>
    <p>This is some more example text, below question form!</p>
    Last edited by rproctor83; 04-25-2011 at 09:29 AM.

  4. #4
    Join Date
    Apr 2011
    Posts
    11
    rproctor83 - thanks that is kind of what I am talking about. I will definitely have my work cut out for me wrangling it into the current format.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles