Javascript кнопка переключения, чтобы открыть и закрыть div

Question

Как я могу заставить свою кнопку переключения не только изменять имена из вида, чтобы скрыть, но также отображать таблицу, которая есть у меня в теге div?

В настоящее время у меня есть следующее для моего скрипта:

   <script type = "text/javascript">
function buttonToggle(where,pval,nval)
{
        where.value = (where.value == pval) ? nval : pval;

}
</script>

и это код для кнопки:

<input type="button" name="button1" id="nextbt" value="View " onclick="buttonToggle(this,'View ','Hide ')">

Answer 1

Хорошо, если вы можете использовать jQuery, это будет очень просто:

$('#nextbt').click(function() {
    if ($(this).attr('value') == 'show') {
        $(this).attr('value', 'hide');
        $('#myotherdiv').slideDown();
    } else {
        $(this).attr('value', 'show');
        $('#myotherdiv').slideUp();
    }

    // or if you don't care about changing the button text, simply:
    $('#myotherdiv').slideToggle();
});

Подробнее здесь: http://api.jquery.com/slideToggle/

Answer 2

Допустим, вы добавили id таблицы, которую хотите показать / скрыть, в качестве атрибута rel кнопки:

<input type="button" name="button1" id="nextbt" 
       rel="myTable" value="View " 
       onclick="buttonToggle(this,'View ','Hide ')">

<table id="myTable">
    <tr>
        <td>myTable</td>
    </tr>
</table>

Затем вы можете добавить следующее к вашему buttonToggleфункция:

function buttonToggle(where, pval, nval) {
    var table = document.getElementById(where.attributes.rel.value);
    where.value = (where.value == pval) ? nval : pval;
    table.style.display = (table.style.display == 'block') ? 'none' : 'block';
}

См. пример.

Answer 3

Что-то вроде:

function buttonToggle(where,pval,nval) {
    var display =  where.value === nval ? 'none' : 'block'; // or 'table'
    document.getElementById('yourTableId').style.display = display;
    where.value = (where.value == pval) ? nval : pval;
}

---

Или лучше:

function buttonToggle(source, target, show_val, hide_val) {
    var display =  source.value === hide_val ? 'none' : 'block'; // or 'table'
    target.style.display = display;
    source.value = (source.value == show_val) ? hide_val : show_val;
}

и вместо добавления встроенного обработчика кликов используйте JavaScript:

document.getElementById('nextbt').onclick = (function() {
    var table = document.getElementById('yourTableId');
    return function() {
        toggleButton(this, table, 'View', 'Hide');
    };
}());

Answer 4

используйте jQuery. см. демо http://jsfiddle.net/nBJXq/2/

Answer 5

Вы захотите изменить style.visible div на visible или hidden и / или установить style.display на block или none.

См .: http://w3schools.com/css/css_display_visibility.asp