html - Hideshow advanced option using JavaScript - Stack Overflow

admin管理员组

文章数量:1291052

I'm making an HTML form, and I'd like some fields to be under "Advanced Options". I want to make an "Advanced Options" link, maybe with a "plus" sign, so that when the user clicks on the link or the sign, those advanced fields show up. How can I do this in JavaScript? I've tried searching for something like "Hide/show advanced option" on Google, but can't find a solution.

<form ... />
    <label>
      Title 
      <input id="title" name="title" size="40" type="text" value="" /> 
    </label>
    <label>
      Year 
      <input id="year" name="year" size="20" type="text" value="" /> 
    </label>
    <label>
      Year 
      <input id="ment" name="ment" size="40" type="text" value="" /> 
    </label>
</form>

For example, here I want the "ment" field to be advanced.

I'm making an HTML form, and I'd like some fields to be under "Advanced Options". I want to make an "Advanced Options" link, maybe with a "plus" sign, so that when the user clicks on the link or the sign, those advanced fields show up. How can I do this in JavaScript? I've tried searching for something like "Hide/show advanced option" on Google, but can't find a solution.

<form ... />
    <label>
      Title 
      <input id="title" name="title" size="40" type="text" value="" /> 
    </label>
    <label>
      Year 
      <input id="year" name="year" size="20" type="text" value="" /> 
    </label>
    <label>
      Year 
      <input id="ment" name="ment" size="40" type="text" value="" /> 
    </label>
</form>

For example, here I want the "ment" field to be advanced.

• javascript
• html

Share Improve this question Follow asked May 27, 2013 at 19:14 Mika H.Mika H. 4,3391313 gold badges4747 silver badges6464 bronze badges 3

• 2 Have you tried anything yet? – Explosion Pills Commented May 27, 2013 at 19:16
• @ExplosionPills Yes, I've tried searching for a solution. I'm not sure what JavaScript function would do this. Could you please give a hint? – Mika H. Commented May 27, 2013 at 19:17
• 1 use CSS class name (or style attribute) to hide your advanced options. Use a JavaScript function to remove the class (or style attribute) when clicking on you "show advanced options" link. – CM Kanode Commented May 27, 2013 at 19:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

<a href='#' class='advanced'>Advanced Options</a>

<div id='advancedOptions'><!-- Form stuff here --></div>

<script type='text/javascript'>
    $(document).ready(function () {
        $('#advancedOptions').hide();
        $('.advanced').click(function() {
            if ($('#advancedOptions').is(':hidden')) {
                 $('#advancedOptions').slideDown();
            } else {
                 $('#advancedOptions').slideUp();
            }
        });
    });
</script>

It will hide the advancedOptions element on load, when you click the a tag it will check if the advancedOptions is hidden, if it is then it will show it if it isn't hidden it will hide it. You will need;

<script src="//ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script> 

at the top of the page you're using, I know it's JQuery, but it would be useful to learn JQuery for future reference

You're looking for something like this (Pure JS):

function more(obj) {
    var content = document.getElementById("showMore");

    if (content.style.display == "none") {
        content.style.display = "";
        obj.innerHTML = "-";
    } else {
        content.style.display = "none";
        obj.innerHTML = "+";
    }
}

This function checks the visibility of your content, if it's hidden, shows it, and vice versa. It also changes the plus sign to a minus. Here's the revised HTML:

<a href="#" onclick="more(this);">+</a>
<br>
<label id="showMore" style="display: none;">
  Year 
  <input id="ment" name="ment" size="40" type="text" value="" /> 
</label>

And a demo: http://jsfiddle/uSqcg/

create a div element, create a css rule to have it hidden by default, on your div element add onmouseover and onmouseout events, and have the following functions associated to those:

function showSomething(textToShow, container) {
    var yourElement = $('#yourDivElement');
    yourElement.removeClass('hidden');

    var w = container.getClientRects()[0].width;
    var h = container.getClientRects()[0].height;
    var t = container.getClientRects()[0].top;
    var l = container.getClientRects()[0].left;

    var st = document.documentElement.scrollTop;
    var sl = document.documentElement.scrollLeft;

    if (st == 0 && document.body.scrollTop > st)
        st = document.body.scrollTop;

    if (sl == 0 && document.body.scrollLeft > sl)
        sl = document.body.scrollLeft;

    yourElement.css('top', t + st + h / 3 * 2);
    yourElement.css('left', l + sl + w / 3 * 2);

    yourElement.html(textToShow);

    var lines = textToShow.length / 20;
    yourElement.css('height', 20 + lines * 10);
}

function hideSomething() {
    $('#yourDivElement').addClass('hidden');
}

just in case (a css rule to hide)

.hidden {
   display: none;
}

and ... just in case

<div onmouseover="showSomething('show this', this);" onmouseout="hideSomething();" class="hidden"></div>

this will position the floating dialog (something like an alt) related to the parent object of your div (The one containing your div element)...

simple ;)

Try this code, here is the demo

<html>
<head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
      $('.advanced').click(function()
      {
        $('#hide').toggleClass("hidden");
      });
  });
</script>
<style>
.hidden
{
    display:none;
}
</style>
</head>
<body>
        <form >
        <label>
          Title 
          <input id="title" name="title" size="40" type="text" value="" /> 
        </label><br/>
        <label>
          Year 
          <input id="year" name="year" size="20" type="text" value="" /> 
        </label><br/>
        <label class="advanced">
          +
        </label><br/>
        <label id="hide" class="hidden">
          Year 
          <input id="ment" name="ment" size="40" type="text" value="" /> 
        </label>
    </form>
</body>
</html>

本文标签： htmlHideshow advanced option using JavaScriptStack Overflow