Show element div collapse when click on map for `getFeatureInfoUrl`

Question

I have a slide toggle that slides from right to left. I want when getFeatureInfoUrl is activated the result will be displayed in slide toggle and slide toggle automatically open. Now i was able to get the result to show in slide toggle but it doesn't open automatically.

How to make slide toggle automatically open when getFeatureInfoUrl is activated.

This is my code:

HTML

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.1.0/ol/ol.css" />
    
    <!-- map -->
    <div id="map" class="map">
       <div id="gmap" class="fill"></div>
       <div id="olmap" class="fill"></div>
    </div>
    
    <!-- slide toggle -->
    <div class="willSlide" id='content'>
        <span style="width: 100%;" id="info">&nbsp;</span>
        <span style="width: 100%;" id="info_qpk"></span>
        <span style="width: 100%;" id="span_search"></span>
    </div>
    <div class="willSlide" id='btn'>
        <span class="click">open</span>
        <span class="expandedTxt">close</span>
    </div>

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.1.0/ol/dist/ol.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer></script>
<!-- jquery api-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<!--JS for slide toggle-->
<script>
$(document).ready(function()
{
  var easing = 1 //enable or disable easing | 0 or 1
  var animation_speed = 500 //ms
      
  var slider_width = $('#content').width();//get width automaticly
  $('#btn').click(function() 
  {
    //check if slider is collapsed
    var is_collapsed = $(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated');
      
    //minus margin or positive margin
    var sign = (is_collapsed) ? '-' : '+'; 
    
      if(!$(this).is(':animated')) //prevent double margin on double click
      {
        if(easing) $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed);
        else $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed);
      }
     //if you need you can add class when expanded
      (is_collapsed) ? $('.willSlide').removeClass('expanded') : $('.willSlide').addClass('expanded');

  });
 });     
</script>

JS for getFeatureInfoUrl

function initMap() {
    var gmap = new google.maps.Map(document.getElementById('gmap'), {
      disableDefaultUI: true,
      keyboardShortcuts: false,
      draggable: false,
      disableDoubleClickZoom: true,
      scrollwheel: false,
      streetViewControl: false
    });

    var view = new ol.View({
      maxZoom: 21
    });
    
    function sync() {
      var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
      gmap.moveCamera({
        center: new google.maps.LatLng(center[1], center[0]),
        zoom: view.getZoom()
      });
    }
    
    view.on(['change:center', 'change:resolution'], sync);

    var olMapDiv = document.getElementById('olmap');
    var map = new ol.Map({
      target: olMapDiv,
      view: view
    });
    view.setCenter([0, 0]);
    view.setZoom(1);
    sync();

    olMapDiv.parentNode.removeChild(olMapDiv);
    gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);
    
    var neLayer = new ol.layer.Image({
            // view: new ol.View({
            // projection: 'EPSG:4326'
            // }),
            source: new ol.source.ImageWMS({
                url: 'https://ahocevar.com/geoserver/wms',
                params: {LAYERS: 'ne:ne', 'TILED': true},
                serverType: 'geoserver',
                ratio: 1,
            }),
            visible: true
        });
        map.addLayer(neLayer)
    
    var content = document.getElementById('info');
    map.on('click', function (evt) {
        content.innerHTML = '';
        var viewResolution = view.getResolution();
        var url = neLayer.getSource().getFeatureInfoUrl(
            evt.coordinate,
            viewResolution,
            'EPSG:3857',
            {
                'INFO_FORMAT': 'application/json',
                'propertyName': 'admin,type',
            },
        );
        if (url) {
            $.getJSON(url, function(data){
                var feature = data.features[0];
                var props = feature.properties;
                content.innerHTML = 
                "<h3>Admin : </h5><p>" +  props.admin + "</p>"
                +"<h3>Yype : </h5><p>" + props.type + "</p>"
                // overlayPopup.show(content.innerHTML);
                // console.log(props);
            })
        }
    });
}

window.initMap = initMap;

LINK DEMO WITH JSFIDDLE

Answer 1

One possible way to open slider when getFeatureInfoUrl is activated would be to define button click processing function as standalone function slideToggle(), which opens/closes slider and also sets global variable is_collapsed accordingly.

When getFeatureInfoUrl is activated, is_collapsed is then checked and slideToggle() called if necessary.

Relevant part of the code could then look something like this:

var easing = 1;
var animation_speed = 500;      
var slider_width;
var is_collapsed = true;

function slideToggle() {
  is_collapsed = $('#btn').css("margin-right") == slider_width+"px" && !$('#btn').is(':animated');
  var sign = (is_collapsed) ? '-' : '+'; 
  if (!$('#btn').is(':animated')) {
    if(easing) $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed);
    else $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed);
  }
  (is_collapsed) ? $('.willSlide').removeClass('expanded') : $('.willSlide').addClass('expanded');
}
  
$(document).ready(function() {     
  slider_width = $('#content').width();//get width automaticly
  $('#btn').click(sidenavToggle);
 });     

map.on('click', function (evt) {
    content.innerHTML = '';
    var viewResolution = view.getResolution();
    var url = neLayer.getSource().getFeatureInfoUrl(
      evt.coordinate,
      viewResolution,
      'EPSG:3857',
      {
          'INFO_FORMAT': 'application/json',
          'propertyName': 'admin,type',
      },
    );
    if (url) {
      $.getJSON(url, function(data){
        var feature = data.features[0];
        var props = feature.properties;
        content.innerHTML = 
        "<h3>Admin : </h5><p>" +  props.admin + "</p>"
        +"<h3>Yype : </h5><p>" + props.type + "</p>"
        if (is_collapsed) slideToggle();
      })
    }
});