JavaScript Trick: Simplest and Shortest Code for Hiding and Displaying as to Make Accordions

There are many ways to hide and show content on a website, one of the simplest ways is to use inline event handlers, combined with ternary operators.

This method creates resuable accordion component using native code, which can be used in blogging content management system like this blog, Blogge,or WordPress. Just use the sample code below.

Example

topic 1
topic 2
topic 3

Sample Code

<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: lightgrey; 
}
  
.content{
  background-color: white;
  text-align: left;
  padding:6px;  
}
</style>
<div class="accordion" onclick="this.childNodes[1].style.display = this.childNodes[1].style.display == 'none' ? 'block' : 'none'">
  topic 1 
  <div class="content" style="display: none;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu tristique libero. Pellentesque aliquam libero eget tempor ultricies. Etiam fringilla tincidunt commodo. Aenean consectetur porta nisi ac rutrum. Nullam aliquam fringilla lacus, nec cursus sapien pulvinar nec. Aenean nec nisi quis lectus laoreet pretium at id odio. Praesent vehicula maximus justo in semper. Morbi mattis sollicitudin turpis, eget condimentum purus rutrum a. Pellentesque at ligula in ex volutpat scelerisque sed vitae sem. Aliquam tincidunt gravida tellus eu porta. Proin aliquet risus et lectus varius tempus.
  </div>
</div>

<div class="accordion" onclick="this.childNodes[1].style.display = this.childNodes[1].style.display == 'none' ? 'block' : 'none'">
   topic 2
  <div class="content" style="display: none;">
    Sed elementum semper mi, ac consequat mi iaculis eu. Morbi mattis velit sed egestas consequat. Sed ultrices, urna ac auctor consectetur, purus est volutpat urna, facilisis scelerisque tortor elit vel nulla. Curabitur dolor sapien, pellentesque sit amet vulputate vel, fringilla id est. Phasellus dictum diam sit amet pulvinar mattis. Sed aliquet ornare tortor, ac gravida urna porta in. Donec euismod sit amet ante in vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras gravida metus id dolor vestibulum, vel euismod magna elementum. Nullam viverra tristique facilisis. Suspendisse malesuada imperdiet maximus.
  </div>
</div>

<div class="accordion" onclick="this.childNodes[1].style.display = this.childNodes[1].style.display == 'none' ? 'block' : 'none'">
   topic 3 
  <div class="content" style="display: none;">
    Donec a malesuada mauris, ac elementum erat. Nunc condimentum urna porta suscipit consectetur. Cras in ligula non lacus dictum pulvinar. Nulla fringilla metus eu lectus vestibulum, non aliquam libero pretium. Fusce vel dui molestie, vulputate purus ac, tincidunt nibh. Pellentesque in ullamcorper justo. Donec egestas pulvinar nisl ut lacinia. Ut eleifend sem nec elit dignissim ullamcorper. Etiam vehicula fermentum scelerisque.
  </div>
</div>

How to Use this Accordion Component with WordPress

  1. In the WP post editor, add a custom HTML block on the top of the post.
  2. Copy the <style>...</style> code and paste it in the block from the 1st step.
  3. Add the accordion html code <div class="accordion" ... </div> to where you want to show the accordion.
  4. Done

Basic Styling of this Accordion

  1. Content in the first div tag is the title like "topic 1". You can change it.
  2. Content in the  second div tag is the accordion content like "Lorem ipsum...". You can change it.
  3. Yon can change font size for all words in the accordion by changing the "font-size" style attribute in .accordion in the style tag.
  4. Play around with background-color, color, width, text-align and etc. to see the effects.

Comments

Post a Comment

Popular posts from this blog

How to Make A Reusable Image Slideshow HTML Component With Vanilla JavaScript

Image
The image slide show I am making has no animation. The mechanism for displaying different slide is by using the display CSS property. The image with display none will not show, while the one with display block will. I will start build one that relys on HTML code then I will build one that relys on JavaScipt that renders the slide show onto the webpage. HTML Slideshow Setup A HTML image slide show can follow the following logic: An image is shown and the others are hidden, by defining the CSS display property to "block" to show and "none" to hide. An index is used to control the CSS display property of each slide with the initial index of 1. On initiation, all image tags for the slide show will be given the CSS property correspoding to whether it's shown or not. A left arrow and a right arrow are used to control the index with onclick event handlers. In order to position the left and right control...
Read more

HTML Tags and Inline CSS that Work In Plotly.js Title

When we create a plot object with Plotly.js, we throw in 3 basic parameters in the Plotly object which are the plot container id, data and layout, like this one: Plotly.newPlot('myDiv', data, layout); And in the layont object, there is a property, called title. The title property can be defined with an string, which will simply be just the title text that is going to display on the top of the plot.  I want to style my chart title when I use Plotly.js.; var layout = { title:`Plot Title` } Or in the text object within the title property. var layout = { title:{text:`Plot Title`} } Plot;y'js has some built-in title properties which we can use to style the title, sush as font color, family, size, padding, and position with x or y. var layout = { title: { text:'Plot Title', font: { family: 'Courier New, monospace', size: 24 }, xref: 'paper', x: 0.05, } }; Problems But I want to add a HTML tag...
Read more

How to Type Spaces In HTML Input And Display In the Browser

Image
When we type a space in an input and use it in JavaScript. The space will be recorded as text just like regular texts. Type In Multiple Spaces When we type some text with many spaces and displays the text in the browser, muiltple spaces will be parsed into one space, if they are connected. Type some text with spaces here: <input oninput="show_1.innerHTML = this.value" /><br /> <div id="show_1"></div> What does JavaScript Do to the Spaces? JavaScript does nothing to the spaces. It preservs all the spaces we type. The following code converts spaces into the letter "a". Space is represnted by \x20 in JavaScript. Type some text with spaces here: <input oninput="show_2.innerHTML = this.value.replace(/\x20/g,'a');" /><br /> <div id="show_2"></div> Why doesn't the Spaces Show in the Browser? Because the connected spaces are parsed into one space in HTML. ...
Read more