Skip to content
Advertisements

JavaScript Array Accordion

CODEPEN:

JavaScript Array Accordion

Github: https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/Array%20Accordion


HTML CODE:


    <div class="container">
        <h2>JavaScript Array</h2>

        <!-- Array from() -->
        <div class="item">
            <div class="section from">Array from()</div>
            <div class="info">
                “Array.from ()” separates the values ​​that are written into.
                it defines each of the things he separates as a sequence element.
            </div>
        </div>

        <!-- Array isArray() -->
        <div class="item">
            <div class="section isArray">Array isArray()</div>
            <div class="info">
                Array.isArray() function determines whether the value
                passed to this function is an array or not. This function
                returns true if the argument passed is array else it returns false.
            </div>
        </div>

        <!-- Array pop()-->
        <div class="item">
            <div class="section pop"> Array pop()</div>
            <div class="info">
                The pop () method removes the last element of an array.
                And define a new array. So this method changes the sequence
                (length and elements).
                pop () does not perform properly when applied
                regularly to non-sequence arrays. If we apply pop ()
                in an empty array, it returns the “undefined” value.
            </div>
        </div>

        <!-- Array push()  -->
        <div class="item">
            <div class="section push">Array push() </div>
            <div class="info">
                The push () method adds one or more elements to the end
                of an array. And it returns its new length. This changes
                the number and length of elements of the array.
                Although strings are natural, the strings are not invariant
                because they are array-like objects, but are not suitable
                for applications in this method. Similarly, the Array-like
                object also applies to arguments.
            </div>
        </div>

        <!-- Array slice()  -->
        <div class="item">
            <div class="section from">Array from()</div>
            <div class="info">
                The Slice() method copies the desired portion of a directory.
            </div>
        </div>

        <!-- Array sort()  -->
        <div class="item">
            <div class="section sort">Array sort() </div>
            <div class="info">
                The sort () method sorts the items in an array.
                This order (if we do not specify a function) is
                in the form of increasing order.
            </div>
        </div>

        <!-- Array forEach() -->
        <div class="item">
            <div class="section forEach">Array forEach()</div>
            <div class="info">
                The forEach () method is used to execute a function on each
                element in an array. In other words: forEach (), the
                ForEach () method runs a function once provided for each
                array element.
            </div>
        </div>

        <!-- Array map() -->
        <div class="item">
            <div class="section from">Array from()</div>
            <div class="info">
                The Map () method scans through each element of the array. 
                It returns a new array with the elements it scans. The map()
                method calls the provided function once for each element in
                an array, in order. The map () method does not change the array, 
                like other methods.
            </div>
        </div>

    </div>

CSS CODE:

body{
    padding: 0;
    margin: 0;
    background: #333;
}
.container {
    width: 400px;
    height: 500px;
    margin: 50px auto;
}
h2 {
    font-family: 'AR CENA';
    color: #ccc;
    text-transform: uppercase;
    font-size: 42px;
    text-align: center
}
.section {
    position: relative;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #ffe725;
    margin: 5px;
    color: #262626;
    font-family: 'AR CENA';
    font-weight: bold;
    transition: all 0.4s ease-in-out 0.15s;
    cursor: pointer;
    font-size: 20px;
    box-shadow: inset 0px 0px 20px #262626;
}
.item > .info {
    opacity: 0;
    transition: all 0.5s ease 0.3s;
    max-height: 0;
}
.section.active ~ .info {
    transition: all 0.4s ease-in-out 0.15s;
    opacity: 1;
    max-height: 100%;
    padding: 20px;
    background: #ccc;
    color: #262626;
    font-family: 'Segoe UI';
    font-size: 15px;
    box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.5);
}
.section.active {
    border-radius: 30px 30px 0px 0px;
    margin:0;
    box-shadow: inset 0px 0px 20px #262626;
}

JS CODE:

        let box = document.querySelectorAll(".section");
        
        box.forEach((x) => x.addEventListener("click", myFunction));

        function myFunction() {
            this.classList.toggle("active");
        }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: