We will use the bootstrap accordion component in our article to demonstrate how to collapse all the children's accordions inside the parent accordion. An accordion is a collapsible component that helps to display an expand/collapse type of content on the webpage. In this article, we will use the Bootstrap 5 Accordion component to display a list of expandable/collapsible elements in a nested fashion. Now, first, we will listen to the “hide” collapse event by attaching an event listener to the parent accordion. After that, when the “hide” collapse event gets fired, we will find all the collapsible elements inside that ... Read More

We can auto-refresh a web page by either using a “meta” tag with the “http-equiv” property, or by using the setInterval() browser API. Automatic refreshing websites have certain use cases to them, for example, while creating a weather-finding web application, we may want to refresh our website after a set interval of time to show the user the near-exact weather data for a location. Let’s look at the 2 approaches below to understand how to set up an auto-refreshing website. Approach 1 In this approach, we will use the “http-equiv” property of a “meta” tag to refresh our web application ... Read More

To implement auto-suggestion of rich content to the user during the typing of an input field, we will use the “amp-autocomplete” script from the Google AMP framework. Autocompleting an input field implies suggesting relevant content to the user as and when the user starts typing. Let’s discuss the approach with an example, below − Approach We will use the “amp-autocomplete” script to add auto-suggestion of rich content on our webpage. We will also use the “amp-form” script from the Google AMP framework so as to use its amp-form component and display it in the UI, and the “amp-mustache” to give ... Read More

We can adjust the font size of the text using the “font-size-adjust” property given to us by the CSS. The “font-size-adjust” property allows us to adjust to a common font size regardless of the different font families used in the document if any. With this, we can adjust the font size of the lower-case letters, used in the document, with respect to the font size of the uppercase letters in the document. Syntax font-size-adjust: number | initial | none | inherit | revert | revert-layer | unset “font-size-adjust” can take on many values that are listed above. These values ... Read More

We can optimize our web application in various ways, and cause our web page to load faster, and in a more efficient way, which not only will reduce the load on the web servers, but also increase the SEO rankings of the website. Let’s discuss the different ways through which we can optimize the web page, and understand them with the help of examples. Approach 1: Minimize the File Size as Much as Possible File size should be minimized as much as possible. This can be achieved by trimming unnecessary whitespaces from within the file, removing unnecessary comments, and/or replacing ... Read More

To arrange text in multi-columns we are using the “column-count” property of CSS3. The “column-count” property is used to divide an HTML element’s content into the number of columns specified. Here we are going to use two different example to demonstrate the application of “colum count” property of CSS to arrange text in 2 and 3 columns. Syntax column-count: n; Here, “n” is the positive integer value that represents the number of columns we want to arrange the text into. Example 1 In this example, we will arrange a “p” tag’s content into 3 columns by using ... Read More

For Applying Styles to Muitliple classes at once we are going to use dot(.) selector and comma(, ). In this article, we will use the dot (.) selector and select all the elements with their class names using the selector and separated by a comma (, ). A “class” is an HTML attribute that accepts a list of classes separated by space. These classes can then be used in CSS to style the particular elements, or in javascript to manipulate those HTML elements. Example 1 In this example, we will apply the font color “red” to the HTML elements that ... Read More

We can apply a shadow effect on a text element using the “text-shadow” property given by CSS. The “text-shadow” property takes a list of values that represents X and Y offsets of the shadow from the element, the blur radius of the shadow, and the color of the shadow. These values are listed in the syntax below − Syntax text-shadow: offset_y offset_x blur-radius color Here the values and their meanings are listed below − Offset-x − It represents the distance of the shadow from the element in the horizontal direction Offset-y − It represents the distance of the ... Read More

Inline CSS is writing the styles for a particular HTML element inside its “style” attribute. The styles here are unique to the element itself, and generally override the CSS provided internally or externally. CSS is used to apply styling to the HTML elements in a web application, and there are various ways through which we can achieve this. One of the ways of applying custom styles is by using inline CSS. Syntax Here, “tag_name” refers to any HTML tag name, and the “style” attribute of the HTML tag allows us to add inline styles to the element directly. ... Read More

We can apply the hover effect over the button using SASS with the help of the :hover CSS selector.SASS stands for Syntactically Awesome Stylesheet and is a CSS pre-processor, which implies one can generate CSS from its respective SASS code. Using SASS instead of just writing CSS comes with its own set of advantages, like more readable code and easy-to-learn code syntax, and one can leverage these to style the HTML elements, more easily and efficiently, in a web application. In this article, we will give styling to a button element with the help of SASS. First, we will write ... Read More