How to deselect all selected options in a multiple select?

I have an select autocomplete, that has multiple true. I would like to clear all selected items with javascript. This is the code I’m using:

const $sel = $('#' + selectId);
if (!$sel.length) {return;}
$sel.find('option:selected').prop('selected', false);
$sel[0].dispatchEvent(new Event('change', { bubbles: true }));

But is not working. This code is only working for multiple = false.

This is code of form element:

// View selections to show on booking options overview.
        $options = array(
            'multiple' => true
        );
        $mform->addElement(
            'autocomplete',
            'showviews',
            get_string('showviews', 'booking'),
            $whichviewopts,
            $options
        );
        $mform->setType('showviews', PARAM_TAGLIST);
        $defaults = array_keys($whichviewopts);
        $mform->setDefault('showviews', $defaults);

Is there a way to programmatically clear selected items from java script and the programmatically select? It’s working only for single item. If I use multiple => true is not working.

can’t connect to mongodb docker replica sets

i’am trying to connect to docker mongodb replica sets from my nodejs application that is not an docker container but anytime i try connecting to mongodb replica set i get an error saying ,

db-connection-error MongooseServerSelectionError: getaddrinfo ENOTFOUND mongo3

or

Unable to connect: getaddrinfo ENOTFOUND mongo1

below is command i use to run docker mongodb containers

C:Usersshubham>docker run -d --name mongo1 --net mongoNetwork -p 27017:27017 -v "C:datadb" mongo:latest --replSet rs0
da575dbb8f73184fdaeaa05e5d30ffbc9d2b103f3fe8aee1a9621476313ee904

C:Usersshubham>docker run -d --name mongo2 --net mongoNetwork -p 27018:27017 -v "C:datadb1" mongo:latest --replSet rs0
df3c5f4ad73c21d6eaf23db0c3e0bd019f4c0bed2ba56570a5006d99e3741b3e

C:Usersshubham>docker run -d --name mongo3 --net mongoNetwork -p 27019:27017 -v "C:datadb2" mongo:latest --replSet rs0
eec0ca83533a47f7ed06060973d8ffcd8847d8be8d427e04139b49a2b8f92b04

C:Usersshubham>

below initializing the replica set

test> config = {_id:"rs0", members:[{_id:0, host:"mongo1:27017"},{_id:1, host:"mongo2:27017"},{_id:2, host:"mongo3:27017"}]}
{
  _id: 'rs0',
  members: [
    { _id: 0, host: 'mongo1:27017' },
    { _id: 1, host: 'mongo2:27017' },
    { _id: 2, host: 'mongo3:27017' }
  ]
}
test> rs.initiate(config)
{
  ok: 1,
  '$clusterTime': {
    clusterTime: Timestamp({ t: 1756458399, i: 1 }),
    signature: {
      hash: Binary.createFromBase64('AAAAAAAAAAAAAAAAAAAAAAAAAAA=', 0),
      keyId: Long('0')
    }
  },
  operationTime: Timestamp({ t: 1756458399, i: 1 })
}
rs0 [direct: secondary]

list of urls i used to connect

  • mongodb://mongo1:27017
  • mongodb://localhost:27017
  • mongodb://localhost:27017,localhost:27018,localhost:27019/?replicaSet=rs0
  • mongodb://mongo1:27017,mongo2:27018,mongo3:27019/?replicaSet=rs0

none of the above urls connected to the mongodb replica set

i’ve tried changing hosts ports in

C:windowssystem32driversetchosts

127.0.0.1 mongo1
127.0.0.1 mongo2
127.0.0.1 mongo3

unfortunately nothing did worked out

i’ve tried so many ways to fix it but still i’am unable to connect to docker mongodb replica sets from outside of docker container to an docker mongodb replica set

please kindly tell help explain why is it happening
what step should i take to connect to replica sets
is it because i’am trying to connect from outside of docker network of something else it the reason

Why do I have missing p tags from acf wysiwyg field?

I’m using ACF in wordpress.

I created a field group named my_group that contains a WYSIWYG field called my_content. Then I created another field that clones my_group.

Inside a flexible content field, one of the layouts is a clone of my_group. When I output the WYSIWYG field (my_content) from the clone, the <p> tags are missing.

Actual:

This is some text
Another line of text

Expected:

<p>This is some text</p>
<p>Another line of text</p>

I can work around this by adding the the_content filter:

echo apply_filters('the_content', $my_content);

I understand that get_field() normally formats wysiwyg content, but here I’m pulling the field data from a flexible content field array:

$flexible_content = get_field('flexible_content');

foreach ($flexible_content as $row) {
    switch ($row['acf_fc_layout']) {
        case 'my_group':
            $my_group = $row['my_group'];
            $my_content = $row['my_content'];
            echo apply_filters('the_content', $my_content);
            // echo $my_content;
            break;
    }
}

Sometimes I do not see this behavior and it works fine when I use this method, but other times I get this unexpected behavior.

Why does the wysiwyg field inside a cloned group sometimes output without <p> tags? Is there a better way to handle it than using the_content filter?

datatables.net alerts Invalid Json Response. I can’t find anything wrong with the json [closed]

I am using Datatables.net to display results of an oracle query. Query works fine and I appear to be getting the right JSON output, but DataTables complains that my JSON is invalid. I have this javascript:

ajax: {
  url: "php/requests.php",
  type: "POST",
  dataSrc: ""
},
paging: false,
scrollY: '60vh',
scrollCollapse: true,
// note:  DataTables.render.number(thousandsSeparater,decimalSeparator,precision,[prefix ie '$'],[suffix])
columns: [
    { data: "Request_Id" },
    { data: "Description" },
    { data: "Requestor" },
    { data: "Request_Date" },
    { data: "Processed", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
    { data: "Processed_Rate", className: "dt-right", render: DataTable.render.number(',', '.', 1) },
    { data: "Pending", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
    { data: "Succeeded", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
    { data: "Success_Rate", className: "dt-right", render: DataTable.render.number(',', '.', 1) }
    { data: "Failed", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
],
order: [0, 'asc']

requests.php gets called as expected when the page loads and this json string is output:

[
    {
        "Request_Id": "10082",
        "Description": "test",
        "Requestor": "[email protected]",
        "Request_Date": "27-AUG-25",
        "Processed": 354,
        "Processed_Rate": 69.00584795321637,
        "Pending": 159,
        "Succeeded": 354,
        "Success_Rate": 100,
        "Failed": 0
    }
]

(as copied from Edge/developer tools/network/response )

this is the message that pops up:
enter image description here
What am I missing?

How to override PHP syntax coloring in VSCode Language

I tried both including source.php after my match rule and injection into the PHP language syntax.

Including the source shows PHP syntax coloring without my override, whereas injection shows my override without PHP coloring.

Attempt PHP Syntax My Syntax Override
With Injection ❌ ✅
Include PHP Source (source.php) ✅ ❌

I would like to see both work at the same time where my syntax overrides the PHP syntax.

Any ideas what is happening or how to achieve this please?

My code setup:

# Language
"languages": [
    {
        "id": "phpf",
        "aliases": ["PHPF", "phpf"],
        "extensions": [".phpf"],
        "configuration": "./language-configuration.json",
        "icon": {
        "light": "file-icons/phpf.png",
        "dark": "file-icons/phpf.png"
        }
    }
]

# Grammar
"grammars": [
    {
        "language": "phpf",
        "scopeName": "source.phpf",
        "path": "./syntaxes/phpf.json",
        "injectTo": ["source.php"]
    }
]

# Syntax
{
    "scopeName": "source.phpf",
    "fileTypes": ["phpf"],
    "name": "PHPF",
    "injectionSelector": "L:source.php",
    "patterns": [
    {
        "name": "phpf.a",
        "match": "___[A-Z]+___"
    },
    {
        "include": "source.php"
    }
    ]
}

# Coloring
"configurationDefaults": {
    "editor.tokenColorCustomizations": {
        "textMateRules": [
        {
            "scope": "phpf.a",
            "settings": {
            "fontStyle": "bold",
            "foreground": "#e24d33"
            }
        }
        ]
    }
}

XML with attributes to array in PHP

I am trying to convert an XML string into multi-dimensioned PHP array. The difficulties are that XML comes with attributes and has nested values. My code works at parent level data but I am not sure how to deal with sub-levels recursively.

A sample XML is as follows:

<root>
    <item id="1" name="ItemOne">Item Value 1</item>
    <item id="2" name="ItemTwo">
        <subb>Sub Value 1</subb>
        <subb>Sub Value 2</subb>
    </item>
    <item id="3" name="ItemThree">Value 3</item>
    <something>something value</something>
</root>

This is my current function to achieve this:

$xmlString = '<root><item id="1" name="ItemOne">Item Value 1</item><item id="2" name="ItemTwo"><subb>Sub Value 1</subb><subb>Sub Value 2</subb></item><item id="3" name="ItemThree">Value 3</item><something>something value</something></root>';

function xmlToArray($xmlObject) {
    $array = [];
    foreach ($xmlObject as $item) {
        // Convert attributes to an array
        $attributes = (array)$item->attributes();
        // Add the text value to the attributes array if it exists
        $attributes['@value'] = trim((string)$item);
        $key = (string)$item->getName();
        if (isset($make_sub_array) && in_array($key, $make_sub_array)) {
            $array[$key][] = $attributes;
        }
        elseif (isset($array[$key])) {
            $make_sub_array[] = $key;
            $tmp = $array[$key];
            unset($array[$key]);
            $array[$key][] = $tmp; //existing data
            $array[$key][] = $attributes; //this data
        }
        else $array[$key] = $attributes;
    }
    return $array;
}
// Load the XML string into a SimpleXMLElement object
$xmlObject = simplexml_load_string($xmlString);
$array = xmlToArray($xmlObject);
exit('<pre>'.print_r($array,1).'</pre>');

The resulting array structure is below, and I require your help about how I can process the array under second item. I would like it to be processed the same way as the parent one: if the item name is repeated then it will be included as [] so I get number as its parent, otherwise [itemname].
Thank you

Array
(
    [item] => Array
        (
            [0] => Array
                (
                    [@attributes] => Array
                        (
                            [id] => 1
                            [name] => ItemOne
                        )
                    [@value] => Item Value 1
                )
            [1] => Array
                (
                    [@attributes] => Array
                        (
                            [id] => 2
                            [name] => ItemTwo
                        )
                    [@value] => 
                )
            [2] => Array
                (
                    [@attributes] => Array
                        (
                            [id] => 3
                            [name] => ItemThree
                        )

                    [@value] => Value 3
                )
        )
    [something] => Array
        (
            [@value] => something value
        )
)

Next.js App Built with Node 20 Breaks When Served with Node 21 – Runtime Compatibility Issue

Problem Description

I have a Next.js application that works perfectly when built and served with Node.js 20, but some sections stop working when I serve the same built version with Node.js 21. This appears to be a runtime compatibility issue between different Node.js versions.

Current Setup

  • Framework: Next.js 14.2.26
  • Build Environment: Node.js 20.x
  • Target Deployment: Cloudflare Workers (which runs Node 21/22+ runtime)
  • Package Manager: pnpm 8.x

What Works vs What Doesn’t

✅ Working Scenario

# Build with Node 20
node --version  # v20.x.x
npm run build
npm run start   # Everything works perfectly

❌ Broken Scenario

# Build with Node 20, serve with Node 21
node --version  # v20.x.x
npm run build

# Switch to Node 21
nvm use 21      # or any method to switch to Node 21
node --version  # v21.x.x
npm run start   # Some sections of the site stop working

Specific Issue

When serving the Node 20-built application with Node 21 runtime:

  • ✅ Site loads – Main pages render correctly
  • ❌ Some sections break – Certain components/features malfunction
  • ❌ Inconsistent behavior – Not a complete crash, but partial functionality loss

Current Configuration

package.json

{
  "engines": {
    "node": "20.x",
    "pnpm": "8.x"
  },
  "scripts": {
    "build": "next build",
    "start": "next start",
    "build:cf": "npx @opennextjs/cloudflare build",
    "deploy:cf": "wrangler deploy"
  },
  "dependencies": {
    "@opennextjs/cloudflare": "^1.6.5",
    "next": "14.2.26",
    "wrangler": "^4.32.0"
  }
}

.npmrc

engine-strict=true

Why This Matters

I need to deploy to Cloudflare Workers, which automatically runs the latest Node.js runtime (21/22+). I cannot control the runtime version on Cloudflare Workers, but I’m constrained to build with Node 20 locally.

Questions

  1. What specific changes between Node 20 and Node 21 could cause partial functionality loss?

  2. How can I identify which sections are breaking and why?

  3. Are there runtime compatibility techniques to make a Node 20 build work reliably on Node 21?

  4. Is this a common issue with Next.js applications when there’s a Node version mismatch between build and runtime?

  5. What debugging approaches can help identify the root cause of the partial failures?

What I’ve Tried

  • ✅ Confirmed the app works perfectly on Node 20 (build + runtime)
  • ✅ Confirmed the same build fails partially on Node 21 runtime
  • ✅ Researched Node 20 vs 21 breaking changes
  • ❌ Haven’t identified the specific cause of partial failures

Environment Details

  • OS: Linux

  • Build Tool: Next.js built-in build system

  • Deployment Target: Cloudflare Workers (via @opennextjs/cloudflare)

  • Package Manager: pnpm with engine-strict enforcement

  • Diagnostic techniques to identify which specific features break

  • Understanding of Node 20 → 21 changes that cause runtime issues

  • Solutions to ensure build/runtime compatibility across Node versions

  • Best practices for handling Node version mismatches in production

This runtime compatibility issue is blocking my Cloudflare Workers deployment. Any help identifying and resolving these partial functionality failures would be greatly appreciated!

What kind of algorithm does betting website use to determined winners probability? [closed]

Well, I’m from the Philippines, where there are a lot of online betting games. I play these games, and I’m curious about what algorithms programmers use to determine the probability of winning. Or is it more like you win a lot of prizes the first time you play, but the more you play, the more you lose?

I tried to talk to other programmers but they said they are different kinds of algorithm they are using and somewhat I’m still confused

How to add +1 each year in the footer copyright each year? [duplicate]

i’ve one part of code that I use before my </body> for each page of my website and it works perfectly. Each year i just need to change 2024 to 2025, 2025 by 2026… manualy.

But i’m wondering if it’s not possible to add something in this code to change it automatically by using my time zone for example and adding +1 to 2025, 2026, 2027… each year from 01/01 at 00.01am?

Here is my actual code:

<script>
$('.footer-copyright, .links-copyright').html("<div style='margin: 0 auto; font-size: 10px;'>all rights reserved 2025 I made by <a target='_blank' href='...'><span style='font-weight:bold'>my name</span></a></div>");
</script>

Output not displaying on mobile

First year student here. Group project. This works how it’s supposed to but when I sent my assignment partner the file, the button does not work. Nothing is displayed.
works great on desktop even with the screen made smaller.

This happens when the file is opened from an email as in the HTML file.

Any help is appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Child Support Calculator</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .container {
            max-width: 500px;
            width: 90%;
            background-color: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            padding: 2rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .input-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #374151;
        }
        .input-group input, .input-group select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 0.5rem;
            font-size: 1rem;
            color: #4b5563;
        }
        .input-group input:focus, .input-group select:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
        }
        .btn {
            background-color: #2563eb;
            color: #ffffff;
            font-weight: 600;
            padding: 0.85rem 1.5rem;
            border-radius: 0.5rem;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
            border: none;
            font-size: 1rem;
        }
        .btn:hover {
            background-color: #1d4ed8;
        }
        .result-box {
            background-color: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            font-size: 1.125rem;
            font-weight: 600;
            color: #1e40af;
            min-height: 3rem; /* Ensure consistent height */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .error-message {
            color: #dc2626;
            font-size: 0.875rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-3xl font-bold text-center text-gray-800 mb-4">Child Support Calculator</h1>

        <div class="input-group">
            <label for="adjustedGrossIncome">Adjusted Gross Income (Monthly)</label>
            <input type="number" id="adjustedGrossIncome" placeholder="e.g., 3000" min="0" step="0.01" class="rounded-lg p-2 focus:ring-blue-500 focus:border-blue-500 block w-full border-gray-300">
        </div>

        <div class="input-group">
            <label for="numberOfChildren">Number of Children</label>
            <select id="numberOfChildren" class="rounded-lg p-2 focus:ring-blue-500 focus:border-blue-500 block w-full border-gray-300">
                <option value="1">1 Child</option>
                <option value="2">2 Children</option>
                <option value="3">3 Children</option>
                <option value="4">4 Children</option>
                <option value="5">5+ Children</option>
            </select>
        </div>

        <button id="calculateBtn" >Calculate Support</button>

        <div id="errorMessage" class="error-message hidden"></div>

        <div id="result" class="result-box">
            
        </div>

       
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const adjustedGrossIncomeInput = document.getElementById('adjustedGrossIncome');
            const numberOfChildrenSelect = document.getElementById('numberOfChildren');
            const calculateBtn = document.getElementById('calculateBtn');
            const resultDiv = document.getElementById('result');
            const errorMessageDiv = document.getElementById('errorMessage');

            const supportPercentages = {
                '1': 0.14, // 14% for 1 child
                '2': 0.20, // 20% for 2 children
                '3': 0.22, // 22% for 3 children
                '4': 0.24, // 24% for 4 children
                '5': 0.26  // 26% for 5 or more children
            };

            /**
             * Calculates the estimated child support based on  guidelines.
             * @param {number} income - The adjusted gross income (monthly).
             * @param {number} childrenCount - The number of children.
             * @returns {number} The estimated monthly child support amount.
             */
            function calculateChildSupport(income, childrenCount) {
                if (income < 0) {
                    return 0; // Income cannot be negative
                }

                let percentage;
                if (childrenCount >= 5) {
                    percentage = supportPercentages['5']; // Use 26% for 5 or more
                } else {
                    percentage = supportPercentages[childrenCount.toString()];
                }

                if (percentage === undefined) {
                    return 0; // Should not happen with valid input, but as a safeguard
                }

                return income * percentage;
            }

            // Event listener for the calculate button
            calculateBtn.addEventListener('click', function() {
                const income = parseFloat(adjustedGrossIncomeInput.value);
                const children = parseInt(numberOfChildrenSelect.value, 10);

                // Input validation for valid positive income
                if (isNaN(income) || income < 0) {
                    errorMessageDiv.textContent = 'Please enter a valid positive adjusted gross income.';
                    errorMessageDiv.classList.remove('hidden');
                    
                    return;
                }

                

                const estimatedSupport = calculateChildSupport(income, children);

                // Display the result
                if (estimatedSupport >= 0) {
                    resultDiv.textContent = `Estimated Monthly Support: $${estimatedSupport};
                } 
            });

            // Optional: Clear error message when input changes
            adjustedGrossIncomeInput.addEventListener('input', function() {
                if (!errorMessageDiv.classList.contains('hidden')) {
                    errorMessageDiv.classList.add('hidden');
                }
            });
        });
    </script>
</body>
</html>

I expected it to display the amount as it does on the desktop.

Does opening an HTML file from an email directly change anything? Or is our code off?

Element addition for Bootstrap modal fails – issue issue with version 12.3

I started using Highcharts version 12.3 and encountered a problem with an additional element I add to my charts. Left of the hamburger menu I position the word INFO and when clicked I have a Bootstrap procedure popping up window with HTML text. I add the element with this javascript part. This worked with 11.2, see fragment below.

What has changed in 12.3 and how to get this back? The error is in this.exportingGroup.getBBox(); You find he whole chart definition in https://meteo-wagenborgen.nl/beta/testchart.txt (you need to format it for readability, VS code works great).

    chart.update({
        chart: {
            events: {
                render() {
                    const {
                        x,
                        y,
                        width
                    } = this.exportingGroup.getBBox();
                    if (!this.customText) {
                        this.customText = this.renderer.text('Info', x - width - 15, y + 15).add().css({
                            color: this.title.styles.color
                        }).css({
                            cursor: 'pointer'
                        }).on('click', () => $('#TestChart').modal('show'));
                    } else {
                        this.customText.attr({
                            x: x - width - 15,
                            y: y + 15
                        });
                    }
                }
            }
        }
    });

datatables.net alerts Invalid Json Response. I can’t find anything wrong with the json

I am using Datatables.net to display results of an oracle query. Query works fine and I appear to be getting the right JSON output, but DataTables complains that my JSON is invalid. I have this javascript:

ajax: {
  url: "php/requests.php",
  type: "POST",
  dataSrc: ""
},
paging: false,
scrollY: '60vh',
scrollCollapse: true,
// note:  DataTables.render.number(thousandsSeparater,decimalSeparator,precision,[prefix ie '$'],[suffix])
columns: [
    { data: "Request_Id" },
    { data: "Description" },
    { data: "Requestor" },
    { data: "Request_Date" },
    { data: "Processed", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
    { data: "Processed_Rate", className: "dt-right", render: DataTable.render.number(',', '.', 1) },
    { data: "Pending", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
    { data: "Succeeded", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
    { data: "Success_Rate", className: "dt-right", render: DataTable.render.number(',', '.', 1) }
    { data: "Failed", className: "dt-right", render: DataTable.render.number(',', '.', 0) },
],
order: [0, 'asc']

requests.php gets called as expected when the page loads and this json string is output:

[
    {
        "Request_Id": "10082",
        "Description": "test",
        "Requestor": "[email protected]",
        "Request_Date": "27-AUG-25",
        "Processed": 354,
        "Processed_Rate": 69.00584795321637,
        "Pending": 159,
        "Succeeded": 354,
        "Success_Rate": 100,
        "Failed": 0
    }
]

(as copied from Edge/developer tools/network/response )

this is the message that pops up:
enter image description here
What am I missing?

How can a menu sidebar be toggled / collapsed by default in HTML / CSS / JS without using a class?

I recently posted a directly related question here containing an MRE for collapsing a sidebar menu by default on page load. The solution for that MRE is simply to set the sidebar class:

<div id="sidebar" class="inactive">

This works for the MRE at the link above, but does not work for the original html5up code.

How can the sidebar be collapsed for this more complex case?

How can a menu sidebar be toggled / collapsed by default in HTML / CSS / JS?

I have downloaded html5up’s Editorial template and am trying to collapse the menu sidebar when the page is first visited. As shown in the screenshot below, clicking on the blue three-bar icon toggles (collapses / expands) the sidebar menu. The sidebar is visible (expanded) when the page is first loaded, but I’d like it to be collapsed instead.

screenshot

The screenshot above depicts an almost-minimal reproducible example that I made using the HTML, CSS and JS below. I realize that there are some unnecessary details like font-awesome so I apologize that this is not a full MRE.

I have naively attempted to collapse the sidebar in index.html using a simple script:

document.getElementById("sidebar").click();

However this does not work.

How can the sidebar be collapsed by default?

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Editorial by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="is-preload">
            <div id="wrapper">
                    <div id="main">
                        <div class="inner">
                                <section id="banner">
                                    <div class="content">
                                        <header>
                                            <h1>Editorial</h1>
                                            <p>A free and fully responsive site template</p>
                                        </header>
                                    </div>
                                </section>
                        </div>
                    </div>
                    <div id="sidebar">
                        <div class="inner">
                                <nav id="menu">
                                    <header class="major">
                                        <h2>Menu</h2>
                                    </header>
                                    <ul>
                                        <li><a href="index.html">Homepage</a></li>
                                        <li><a>Generic</a></li>
                                        <li><a>Elements</a></li>
                                    </ul>
                                </nav>
                        </div>
                    </div>
            </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/main.js"></script>
            <script>
            </script>
            <script>
                document.getElementById("sidebar").click();
            </script>
    </body>
</html>

main.css

@import url(fontawesome-all.min.css);


/* Wrapper */
#wrapper {
  display: flex;
  flex-direction: row-reverse;
  min-height: 100vh; }

/* Main */
#main {
  -moz-flex-grow: 1;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  -moz-flex-shrink: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  flex-shrink: 1;
  width: 100%; }
  @media screen {
    #main > .inner {
      padding: 0 5em 0.1em 5em ; }
      #main > .inner > section {
        padding: 5em 0 3em 0 ; } }



#sidebar {
  -moz-flex-grow: 0;
  -webkit-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  -moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  background-color: #f5f6f7;
  position: relative; }

  #sidebar .toggle {
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-indent: -15em;
    top: 0;
    width: 6em;
    z-index: 10000; }
    #sidebar .toggle:before {
      font-family: 'Font Awesome 5 Free';
      content: 'f0c9';  /*3-bar sidebar toggle icon*/
      left: 0;
      position: absolute;
      text-indent: 0;
      width: inherit; }

  @media screen {
    #sidebar {
      width: 12em; }
      #sidebar > .inner {
        padding: 1.66667em 1.66667em 1.33333em 1.66667em ;
        width: 12em; }
      #sidebar .toggle {
        left: 12em;
        line-height: 6.25em;}
        #sidebar .toggle:before {
          font-size: 1.5rem; }
      #sidebar.inactive {
        margin-left: -13em; } }

main.js

(function($) {
    var $window = $(window),
        $head = $('head'),
        $body = $('body');

        var $sidebar = $('#sidebar'),
            $sidebar_inner = $sidebar.children('.inner');

            $('<a href="#sidebar" class="toggle">Toggle</a>')
                .appendTo($sidebar)
                .on('click', function(event) {
                        event.preventDefault();
                        event.stopPropagation();
                        $sidebar.toggleClass('inactive');
                });
})(jQuery);