Question

Create a page with different elements and animations. Using different events, manipulate the classes and fade...

Create a page with different elements and animations. Using different events, manipulate the classes and fade elements as well as animation and slide in/out with jQuery.

Create an accordion (see jquery-04 / accordion)

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Below is the html Solution with output screenshot

Code : index.html

<!DOCTYPE html>
<html>
    <head>
        <!-- include jquery cdn file -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <!-- giving a title to our page -->
        <title>jquery Demo</title>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <!-- inserting all the script here in the script tag -->
        <script>
            $(document).ready(function () {
                $("#btn1").click(function () {
                    $("#box").animate({ height: "300px" });
                });
                $("#btn2").click(function () {
                    $("#box").animate({ height: "100px" });
                });

                $("#flip").click(function () {
                    $("#panel").slideToggle("slow");
                });

                $("#fadein").click(function () {
                    $("#div1").fadeIn();
                    $("#div2").fadeIn("slow");
                    $("#div3").fadeIn(3000);
                });

                $(function () {
                    $("#accordion").accordion();
                });
            });
        </script>

        <!-- using css here in style tag -->
        <style>
            #panel,
            #flip {
                padding: 5px;
                text-align: center;
                background-color: #e5eecc;
                border: solid 1px #c3c3c3;
            }

            #panel {
                padding: 50px;
                display: none;
            }
        </style>
    </head>
    <body>
        <!-- animate section -->
        <p>Demonstrate jquery animate function</p>
        <button id="btn1">Animate height</button>
        <button id="btn2">Reset height</button>

        <div id="box" style="background: #98bf21; height: 100px; width: 100px; margin: 6px;"></div>

        <!-- toogle section -->
        <p>Demonstrate jquery slidetoggle function</p>

        <div id="flip">Click to slide the panel down or up</div>
        <div id="panel">Hello world!</div>

        <!-- accordion section -->
        <p>Demonstrate Accordion using jquery</p>
        <div id="accordion">
          <h3>Section 1</h3>
          <div>
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
          </div>
          <h3>Section 2</h3>
          <div>
            <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
            suscipit faucibus urna.
            </p>
          </div>
          <h3>Section 3</h3>
          <div>
            <p>
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
            Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
            ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
            lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
            </p>
            <ul>
              <li>List item one</li>
              <li>List item two</li>
              <li>List item three</li>
            </ul>
          </div>
          <h3>Section 4</h3>
          <div>
            <p>
            Cras dictum. Pellentesque habitant morbi tristique senectus et netus
            et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
            faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
            mauris vel est.
            </p>
            <p>
            Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
            inceptos himenaeos.
            </p>
          </div>
        </div>

        <!-- fade section -->
        <div id="fade-div">
            <p>Demonstrate fadeIn() with different parameters.</p>
            <button id="fadein">Click to fade in boxes</button><br />
            <br />

            <div id="div1" style="width: 80px; height: 80px; display: none; background-color: red;"></div>
            <br />
            <div id="div2" style="width: 80px; height: 80px; display: none; background-color: green;"></div>
            <br />
            <div id="div3" style="width: 80px; height: 80px; display: none; background-color: blue;"></div>
        </div>

    </body>
</html>

Output :

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
For this assignment, create an html page that has a login form. The form should have...
For this assignment, create an html page that has a login form. The form should have 3 input elements -- 1. This should have a type text for the user to enter UserName 2. This should have a type password (like text except cannot see the text that is typed in), for the user to enter password. 3. Submit button (type submit, as we did in class on 2/6). The form method should be set to POST and the action...
Assignment Statement Use the skeleton file starter code (below) to create the following classes using inheritance:...
Assignment Statement Use the skeleton file starter code (below) to create the following classes using inheritance: ⦁   A base class called Pet ⦁   A mix-in class called Jumper ⦁   A Dog class and a Cat class that each inherit from Pet and jumper ⦁   Two classes that inherit from Dog: BigDog and SmallDog ⦁   One classes that inherit from Cat: HouseCat The general skeleton of the Pet, Dog, and BigDog classes will be given to you (see below, "Skeleton", but...
Please linked both files. For this assignment you need to create a ToDo list using Javascript,...
Please linked both files. For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link...
--USING C# ONLY-- You will create your own on-line shopping store in the console application. You...
--USING C# ONLY-- You will create your own on-line shopping store in the console application. You can choose different products to sell in your store (at least 8 products). You will create an product inventory text file. The program will display two options at the beginning of the program, Customer and Manager. Customer: If this is a new customer, the program will allow the customer to register with their information and assign a unique ID number to the new customer....
CAN YOU PLEASE WRITE THIS CODE IN A DIFFERENT WAY 'EASIER AND BETTER' QUESTION Using C++...
CAN YOU PLEASE WRITE THIS CODE IN A DIFFERENT WAY 'EASIER AND BETTER' QUESTION Using C++ 11. Write a function that will merge the contents of two sorted (ascending order) arrays of type double values, storing the result in an array out- put parameter (still in ascending order). The function shouldn’t assume that both its input parameter arrays are the same length but can assume First array 04 Second array Result array that one array doesn’t contain two copies of...
Data-Set: “Car Companies –02.19.2019” –first page of which are Treasury Interest Rates Background: Musk tweeted…. Going...
Data-Set: “Car Companies –02.19.2019” –first page of which are Treasury Interest Rates Background: Musk tweeted…. Going Private… Funds Assured!!! Well, maybe not. Musk gets sued. Tesla gets sued. Stock price goes up, goes down, goes everywhere… Musk steps down as Chairman and both Musk and Tesla settle their lawsuits with the SEC. Tesla still has Musk as CEO – but now under control. Well, that was until 02.26.2019 when he tweeted again, and violated his SEC restraining order. Out of...
In MPLAB XIDE create a program using assembly to produce three different LED combinations using 4...
In MPLAB XIDE create a program using assembly to produce three different LED combinations using 4 LED lights and 4 switches that correspond to each LED. There will be 4 inputs and 4 outputs. The program includes three levels (the three LED combinations). Each level will be a random combination (i.e. red, blue, green, orange). The player will then repeat the combinations as accurately as possible. If the player repeats the led sequence correctly, the code will branch to the...
Summerize each of the two different charts below, how they will be used in your chosen...
Summerize each of the two different charts below, how they will be used in your chosen career, proposed improvements and better ways this information could be conveyed. SOAP Charting include the list below and put the items in a SOAP format. You will want to research to find a form of your choice. You may add words to make sentences out of some of these items. When you get done, you should be able to view the notes and have...
Using the following code perform ALL of the tasks below in C++: ------------------------------------------------------------------------------------------------------------------------------------------- Implementation: Overload input...
Using the following code perform ALL of the tasks below in C++: ------------------------------------------------------------------------------------------------------------------------------------------- Implementation: Overload input operator>> a bigint in the following manner: Read in any number of digits [0-9] until a semi colon ";" is encountered. The number may span over multiple lines. You can assume the input is valid. Overload the operator+ so that it adds two bigint together. Overload the subscript operator[]. It should return the i-th digit, where i is the 10^i position. So the first...
Visual Merchandising at Vintage Treasures The environment in a store, the design of the store, and...
Visual Merchandising at Vintage Treasures The environment in a store, the design of the store, and the presentation and location of merchandise in the store have a significant impact on shopping behavior. Store managers are responsible for implementing the design and visual merchandising developed by specialists at the retailer's corporate headquarters. Store design and visual merchandising are also elements of a retailer's communication mix and play an important role in creating and reinforcing a retailer's brand image. Brandi is the...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT