hide-this | WordPress plugin provides a shortcode that lets you hide | Plugin library

I'm trying to organize some elements across 3 columns using Bootstrap 4.5.

The center column will have a long body.

The right column with have content (2 divs) that should be either stuck to the top / bottom. I'm having exceeding difficulty getting the bottom element to stick. The element auto-expands, and I want it to auto-expand from the bottom.

I'm using Tocify as my ToC in the top of this right column.

The left column has several divs. The top div is a banner, which I would like stuck there. The rest of the divs are less important. Depending on the size of the viewport, this column may overflow, in which case I'd like an independent scrollbar for this left column. There should be 2 separate, independent scroll bars (webpage scroll and left-panel scroll).

Here's a bootstrap loaded fiddle with an example (with a long body to demonstrate the issue): https://jsfiddle.net/x1nhrwtf/5/

I want to convert my program into plain javascript and remove all JQuery code, however I used to use a JQuery function like this to find the with the class ".hide-this" to only hide the Card-Body of the Card belonging to the button.

I use Bootstrap with datatables and would like to hide specific table rows using pure CSS, without any JavaScript / jQuery.

I thought, I can do it like this, but it doesn't work, unfortunately:

I was using GTmetrix to check my site speed, and one of the recommendations was to take a tiny JavaScript file I was externally referencing and make it inline instead. I understand I need to add it inside script tags in the footer, but do I need to edit any of the existing content?

My code is:

i'm pretty new to coding (just started a free weeks ago with html and css). For a news page i tried to implement "read on" links, similiar to this question here: on click hide this (button link) pure css

However i can't seem to make the link disappear after clicking it. I got this for my code so far (opening and closing works just fine):

I have a web page where a number of items are displayed. Suppose there are 14 items to show.

Each item has a bootstrap column configuration depending on type of device screen size. That's easy with bootstrap by just adding the following classes col-lg-2, col-md-3, col-sm4, and col-xs-6, such that there are respectively 6, 4, 3 and 2 items per row.

I'm using bootstrap data-toggle, data-target and collapse classes in order to have 2 full row of items and the rest hidden.

For example, on a lg device screen, the code is:

This should be a straightforward problem but I haven't found the solution anywhere on the list.js documentation. How do I go about preventing the list from auto searching as I type in the search field and instead add a search button instead?

I need to hide an element based on the window.location.href object. My approach is below:

I am using list.js. When the page loads I would like to change the search bars value to "newvalue" and then trigger the search. What should happen is that no list items appear because nothing matches the search term. Unfortunately, while i've been able to get the search bar input value to change I can't seem to trigger the actual search itself. Ive tried focusing on input element before the value change, I've tried setting a timeout function, and i've tried using .change instead of .val. I'm not sure what the issue and at this point I'm not sure what else to do, so any help would be greatly appreciated.