Responsive Flexible Accordion Gallery In JavaScript & CSS/CSS3

Responsive Flex Image Gallery

Support All view port

  • mobile
  • tablet
  • desktop

Use CSS transition / transform

  • Dog image
  • Cat image
  • Lion image
  • Mouse image

Use Vanila Javascript to control CSS transition

Download Details:

Author: haesooKr

Source Code: https://github.com/haesooKr/responsiveFlexGallery

#javascript #css

What is GEEK

Buddha Community

Responsive Flexible Accordion Gallery In JavaScript & CSS/CSS3
Nandini roy

Nandini roy

1618667097

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Tutorial: https://youtu.be/9DDiorNZiyw

#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website

Raja Tamil

Raja Tamil

1652413050

Create A Simple Accordion Menu Using Vanilla JavaScript

By the end of this tutorial, you’re going to be building a simple accordion menu, just using Vanilla JavaScript of course, with the combination of HTML and CSS.

What are we building?

Accordion Menu HTML Structure

The HTML code of the Accordion Menu is pretty straightforward.

I have a simple section element with an id called #accordion-container.

Inside that, add three divs with the class name .menu and each contains two HTML elements: .header and .content.

Header element also contains .title and .icon elements.

<section id="accordion">

    <div class="menu">
        <div class="header">
            <div class="title">Title 1</div>
            <span class="icon">+</span>
        </div>
        <div class="content">
            Content 1
        </div>
    </div>

    <div class="menu">
        <div class="header">
            <div class="title">Title 2</div>
            <span class="icon">+</span>
        </div>
        <div class="content">
            Content 2
        </div>
    </div>

    <div class="menu">
        <div class="header">
            <div class="title">Title 3</div>
            <span class="icon">+</span>
        </div>
        <div class="content">
            Content 3
        </div>
    </div>

</section>

Accordion Menu CSS

Let’s add some CSS to make to match the final result.

Define a CSS rule for #accordion with a max-width to 500px and make it center to the screen horizontally using margin: 0 auto property.

After that, add borders all-around to each .menu item which is the clickable area of the accordion menu.

#accordion {
  max-width: 500px;
  margin:0 auto;
}

.menu {
  border:1px solid #008080;
  border-bottom:none;
}

 .menu:last-child {
  border-bottom:1px solid #808080;
}

Using flexbox, lets move the “+” icon to the right and keep the title on the left.

Recommended
Must-Know CSS Flexbox Responsive Multi-Column Layout Explained


.header {
  display:flex;
  padding:10px; 
  cursor: pointer;
}

.title {
  flex:1;
}

.icon {
  width:20px;
} 

 .content {
  padding:10px;
} 

Finally, hide the .content by default and I’ll show you how to toggle it’s visibility using JavaScript in just a moment.

.content {
  display:none;
  padding:10px;
} 

That looks much better.

Now let’s move into the fun part.

Accordion Menu JavaScript

The first step is to get all the DOM references of the header as well as the content and assign them to the constant arrays called headers and contents respectively.

const headers = document.getElementsByClassName("header"),
      contents = document.getElementsByClassName("content");

Secondly, iterate through the headers array using for loop and attach a click event to each header inside with a callback arrow function.

Recommended
JavaScript For Loop Click Event ← Issues & Solutions Explained

for (let i = 0; i < headers.length; i++) {
     headers[i].addEventListener("click", () => {
     });
}

Finally, toggle the content visibility by using the display CSS property on it. I used the ternary operator here to achieve this but you can also use the regular if statement.

Continue Reading…

#HTML #css #JavaScript 

wp codevo

wp codevo

1608041337

RESPONSIVE Personal PORTFOLIO Website HTML CSS And JAVASCRIPT

https://youtu.be/J8g9gyzhEoM

#responsive website using html5 and css3 #portfolio website #one page personal website html css #portfolio website design in html css #css responsive website design #responsive website html css

wp codevo

wp codevo

1608043308

Responsive Personal Portfolio Website using HTML CSS & JavaScript

https://youtu.be/CHQvM4oS7ww

#responsive website using html5 and css3 #responsive website html css #portfolio website #portfolio website design in html css #complete responsive website in html css javascript #one page personal website

Responsive Flexible Accordion Gallery In JavaScript & CSS/CSS3

Responsive Flex Image Gallery

Support All view port

  • mobile
  • tablet
  • desktop

Use CSS transition / transform

  • Dog image
  • Cat image
  • Lion image
  • Mouse image

Use Vanila Javascript to control CSS transition

Download Details:

Author: haesooKr

Source Code: https://github.com/haesooKr/responsiveFlexGallery

#javascript #css