Toggle Visibility Property of Div

Toggle visibility property of div

Using jQuery:

$('#play-pause').click(function(){
  if ( $('#video-over').css('visibility') == 'hidden' )
    $('#video-over').css('visibility','visible');
  else
    $('#video-over').css('visibility','hidden');
});

Toggle visibility of the current element

Use method nextElementSibling to return the next element. And it is not necessary to use the if {} operator.

Don't use this for arguments in functions.

The more correct way for your task is method toggle(), which your class uses in css .daccord_b.

function toggle_active(el) {
    var x = el.nextElementSibling;
    x.classList.toggle("daccord_b");
}

.daccord_b {
    display: none;
}

<header class="ca_h" onclick="toggle_active(this);">
    <i class="i i-plus ca_hi"></i>
    Title
</header>
<div class="had daccord_b">Hidden content</div>

Button toggle div visible property

First off, false is not a valid value for the visibility property. You are probably looking for hidden.

style="visibility: hidden;"

The valid values are as follows:

visibility: visible|hidden|collapse|initial|inherit;

Secondly, you are mixing ASP.NET and CSS visibility functionality. You should choose one or the other instead of both. Otherwise they will conflict with each other and you may not see what you expect to see.

CSS:

<div runat="server" id="Errmsg" style="visibility: hidden;">

Errmsg.Style.Add("visibility", "hidden");

ASP.NET:

<div runat="server" id="Errmsg" Visible="False">

Errmsg.Visible = false;

Alternatively, you can also use Panels instead of divs. They act as containers just as divs do, but are a little easier to work with in your code behind when it comes to ASP.NET functionality.

<asp:Panel ID="Errmsg" runat="server" Visible="False"></asp:Panel>

toggle div to show hide

you should use .css( propertyName, value )

Set one or more CSS properties for the set of matched elements.

so your last line should be

$('#MSOZoneCell_WebPartWPQ').css('display', 'table');

---

when you call .css( propertyName )

$('#MSOZoneCell_WebPartWPQ').css('display);

you are Getting the value of said property not setting it

Get the computed style properties for the first element in the set of
matched elements.

---

Update 1:

please note that Jquery's .show(), .hide() and .toggle() will only work with elements with block display property.

so one way to avoid changing the display property back and forth is to wrap the wanted elements in a div (container) and .toggle() it.

I have created a JSFiddle, I warped each div in a container div with a calss called "toggle" and set initial display value of one of them to "none" using style attribute.

<div class="toggle" style="display:none">

now I toggle between them using this

$('.toggle').toggle();

---

Update 2:

you can also use .toggleClass() here's another JSFiddle

Add this to your CSS

#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
  display: none;
}

add a class to the div you want initially hidden

<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">

toggle the class using this

$(function() {
$('#swap').click(function() {
    $('#MSOZoneCell_WebPartWPQ2').toggleClass("hiddenDiv");
    $('#example_wrapper').toggleClass("hiddenDiv");
});
});

in this example I'm using a class called "hiddenDiv", if you change it make sure the class name is the same in CSS, HTML and JS.

How to toggle visibility of divs based on the option selected in html

Minimal JS version (https://codepen.io/sodapop/pen/yLObGex) that gives the select option values that are the same as the element ID's that are to be targeted:

// main.js
// cache selected value
let selected = ''

const toggleDisplay = (id, action = 'add') =>  document.getElementById(id).classList[action]("hidden");

// Get event object
function selectCategory({ target }) {
  // Check if there's a selected element and hide it
  if(selected && selected !== target.value) toggleDisplay(selected)
  // Set selected to latest element
  selected = target.value
  // remove 'hidden' class from selected
  return toggleDisplay(target.value, 'remove')
}

HTML:

<div class="form-group">
  <label for="Category ">Select Category</label>
  <select 
       class="form-control" 
       id="category" 
       <!-- Pass event into selectCategory -->
       onchange="selectCategory(event)">
    <option></option>
    <optgroup label="Vehicles">
      <!-- Added value -->
      <option value="sellVehicle">Sell Vehicle</option>
      <!-- Added value -->
      <option value="homeAppliances">Rent Vehicle</option>
    </optgroup>
    <option>Home Appliances</option>
    <option>Clothes and Materials</option>
  </select>
</div>
<div class="form-group hidden" id="sellVehicle">
  <p> Vehicle... </p>
</div>
<div class="form-group hidden" id="homeAppliances">
  <p> Appliances... </p>
</div>

CSS:

.hidden{
    display:none;
}

How to toggle visibility of several divs separately

The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $(self).text(function(_,txt) {
                    return txt == "Hide all" ? "See all" : "Hide all";
               });
           });
    });
});

FIDDLE

Note the use of the classes only (ID's must be unique) and the this keyword

How to Toggle a div's visibility by using a button click

In case you are interested in a jQuery soluton:

This is the HTML

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

This is the jQuery script

$( "#button" ).click(function() {
    $( "#item" ).toggle();
});

You can see it working here:

http://jsfiddle.net/BQUyT/

If you don't know how to use jQuery, you have to use this line to load the library:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

And then use this line to start:

<script>
$(function() {
    // code to fire once the library finishes downloading.
});
</script>

So for this case the final code would be this:

<script>
$(function() {
    $( "#button" ).click(function() {
        $( "#item" ).toggle();
    });
});
</script>

Let me know if you need anything else

You can read more about jQuery here: http://jquery.com/

---

Related Topics