Maintain Expanded Div visibility Across Postback

Question

Maintain Expanded Div visibility Across Postback

My panel features multiple collapsible filters that expand when a button is clicked. However, after each postback, the div collapses again. How can I ensure that the current state of the div remains consistent across postbacks?


<h4 class="contentFilterHeader">Start Date</h4>
<button type="button" class="btn" data-toggle="collapse" data-target="#startDate"></button>
<div id="startDate" class="collapse">
    <label for="from">Before:</label>
    <div class="form-group">
        <div class="date">
            <div class="input-group">
                <input type="text" class="form-control" id="startPicker" runat="server" name="date" />
                <span class="input-group-addon><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
    </div>

javascript html css postback

Answer 1

Answer №1

Utilize a HiddenField element to retain the status of the panel.

Answer 2

Utilize a HiddenField element to retain the status of the panel.

Answer 3

Answer №2

To dynamically show the #startDate div in your C# code-behind, you can add the attribute runat=server to it and then set its Class property after checking if it is a postback. Alternatively, you can also inject some JavaScript to open it when the page loads.

startDate.innerHtml = startDate.innerHtml + "<script> $(document).ready(function(){ $('#startDate').collapse('show') }) </script>";

This approach assumes you are utilizing C# and Bootstrap.

Additionally, you can explore this code example for further guidance: http://codepen.io/jammer99/pen/eZyqEN

var t,
  // Check any previously opened panel using cookie
  earlierPanel = readCookie("openpanel");
  
if (earlierPanel) {
  $('#accordion .panel-collapse').removeClass("in");
  $("#" + earlierPanel).addClass("in");
}

$('#accordion').on('shown.bs.collapse', function(w) {
  t = w.target;
  createCookie("openpanel", $(t).attr("id"));
})

$('#accordion').on('hide.bs.collapse', function(w) {  
  createCookie("openpanel","");
})

function createCookie(name, value) {
  document.cookie = name + "=" + value + "; path=/";
}

function readCookie(name) {
  var e = name + "=";
  var a = document.cookie.split(";");
  for (var d = 0; d < a.length; d++) {
    var f = a[d];
    while (f.charAt(0) == " ") {
      f = f.substring(1, f.length)
    }
    if (f.indexOf(e) == 0) {
      return f.substring(e.length, f.length)
    }
  }
  return null
};

Answer 4

To dynamically show the #startDate div in your C# code-behind, you can add the attribute runat=server to it and then set its Class property after checking if it is a postback. Alternatively, you can also inject some JavaScript to open it when the page loads.

startDate.innerHtml = startDate.innerHtml + "<script> $(document).ready(function(){ $('#startDate').collapse('show') }) </script>";

This approach assumes you are utilizing C# and Bootstrap.

Additionally, you can explore this code example for further guidance: http://codepen.io/jammer99/pen/eZyqEN

var t,
  // Check any previously opened panel using cookie
  earlierPanel = readCookie("openpanel");
  
if (earlierPanel) {
  $('#accordion .panel-collapse').removeClass("in");
  $("#" + earlierPanel).addClass("in");
}

$('#accordion').on('shown.bs.collapse', function(w) {
  t = w.target;
  createCookie("openpanel", $(t).attr("id"));
})

$('#accordion').on('hide.bs.collapse', function(w) {  
  createCookie("openpanel","");
})

function createCookie(name, value) {
  document.cookie = name + "=" + value + "; path=/";
}

function readCookie(name) {
  var e = name + "=";
  var a = document.cookie.split(";");
  for (var d = 0; d < a.length; d++) {
    var f = a[d];
    while (f.charAt(0) == " ") {
      f = f.substring(1, f.length)
    }
    if (f.indexOf(e) == 0) {
      return f.substring(e.length, f.length)
    }
  }
  return null
};

Maintain Expanded Div visibility Across Postback

Answer №1

Answer №2

Similar questions

How to emphasize a clicked hyperlink in AngularJS

Multiple sources are able to access and modify the data stored in one data.json file

Tablet-friendly dropdown menu

Why are the elements not found by their id when I check them, even though they were created dynamically using an ajax-generated form with php-inserted values through a

Wrapping text around an image using two distinct Angular components

Angular 8 project experiencing issues with Bootstrap dropdown functionality

React JS makes it simple to create user-friendly cards that are optimized

Issue with strange behavior of CSS cursor with images

Guide on placing the back arrow button in React Navigation

What is the impact of sending a JavaScript request to a Rails method every 15 seconds in terms of efficiency?

Conflict between multiple jQuery files

Increasing the identifier of duplicated input fields using jQuery

Displaying numerous information panels on Google Maps by extracting data from MySQL

Generate user-customized UI components from uploaded templates in real-time

What causes the oninput event to act differently in Angular as opposed to regular JavaScript?

A flex container containing two divs each with a white-space:nowrap element set at 50% width

What is the best way to locate all mesh faces that are being lit up by a SpotLight

The absence of req.body in the app reflects an undefined state

Automatically submitting forms without having to refresh the page

Guide to displaying pages on the dashboard in a React application with the help of Material UI