Bone Cancer HTML Page

<!--
/**
 * @license
 * MyFonts Webfont Build ID 2931281, 2014-11-30T14:50:45-0500
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: Dual-300 by CDType
 * URL: http://www.myfonts.com/fonts/cdtype/dual/300/
 * Copyright: Copyright (c) 2014 by Charles Daoud. All rights reserved.
 * Licensed pageviews: 20,000
 *
 *
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2931281
 *
 * ? 2014 MyFonts Inc
*/

-->


<!DOCTYPE HTML>

<html>
    <head>
     <meta charset = "utf-8" />
        <script src = "script.js"> </script>
        <link rel="stylesheet" type="text/css" href="engine1/style.css" />
        <script type="text/javascript" src="engine1/jquery.js"></script>
        <link rel = "stylesheet" href = "style.css" />
        <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
        <link rel = "stylesheet" href = "fonts.css" />
        <script rel = "text/javascript" src="jquery-1.11.1.js"></script>
        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
        <script type="text/javascript" src="smoothscroll.js"></script>
        <script src="Chart.js"></script>
        <script type="text/javascript">window.onload = function(){
                                var ctxbone = document.getElementById("boneStatsPie").getContext("2d");
                                window.myPie = new Chart(ctxbone).Pie(pieDataBone);

    var ctx2 = document.getElementById("BoneStatsLine").getContext("2d");
        window.myLine = new Chart(ctx2).Line(lineChartDataBone, {
            responsive: true
        });


            };</script>

        <title>Bone Cancers</title>
    </head>

     <body>


        <div id='header_holder'>

        <div id='header'>
            <span id = "title_text">The Cure It Project</span>


           <div id = "user_options">

            <span id = "option_one" class = "flexible" onClick = "openHome()">Home</span>
            <span id = "option_two" class = "flexible" onClick = "openDisease()">Diseases</span>
            <span id = "option_three" class = "flexible">Stories</span>
            <span id = "option_four" class = "flexible">FAQ</span>
            <span id = "option_five" class = "flexible">Contact Us</span>

            </div>


            <div id='blue'></div><div id='pink'></div><div id='green'></div><div id='orange'></div><div id='red'></div><div id='yellow'></div><div id = "color"></div>

        </div>
            </div>
            <span id = "move_all">

            <div id="parallax-main">

                <section>
                    <div class="title">


                    </div>
                </section>

                  <section>
                    <div class="parallax-lungs">
                        <h2 id = "picture_text_lung" class = "altText">Bone Cancers are the most common<br /> form of cancer in children and young adults</h2>


                    </div>
                </section>


                <section>
                    <div class="block">
                    <p><div id = "center_element"><span class="first-character one">BONE CANCERS</span></div>

                    <div id = "move_down">
                    <div id = "move_down">
                        <!-- Body Content One -->

                        <div id = "menu_box">
                            <span id = "menu_box_header">Content</span>
                            <br />
                            <br />
                            <span id = "info_box">

                                Cases Per Year: 2,970
                                <br />
                                Deaths Per Year: 1,490

                            </span>
                            <br />

                            <a href = "#anchor_up_first" class = "smoothScroll"> <span id = "menu_box_options">What are Bone Cancers?</span> </a>
                            <br/><br /><br />
                            <a href = "#anchor_up_second" class = "smoothScroll"> <span id = "menu_box_options">Advancements in Treatment</span> </a>
                            <br/><br /><br />
                            <a href = "#anchor_up_third" class = "smoothScroll"> <span id = "menu_box_options">How to Help</span> </a>


                        </div>

                        <br />
                         <p class="line-break margin-top-10"></p>
                        <br />
                        <div id = "anchor_up_first" class = "move_focus_up"> </div>
                        <div id = "goFirst" class = "smaller_header">What are Bone Cancers?</div>


                        <br />


                        <span onClick = "window.open('http://en.wikipedia.org/wiki/Bone_tumor')"class = "link">Bone Cancer</span> is described as the uncontrollable growth of cells, originating in areas with bones or bone related cells. There are 3 different types of Bone Cancers: <span onClick = "window.open('http://en.wikipedia.org/wiki/Osteosarcoma')"class = "link">Osteosarcomas</span>, <span onClick = "window.open('http://en.wikipedia.org/wiki/Ewing's_sarcoma')"class = "link">Ewing Tumors(ET)</span>, and <span onClick = "window.open('http://en.wikipedia.org/wiki/Chondrosarcoma')"class = "link">Chondrosarcomas</span>. These 3 forms of cancer will be discussed in great detail below.


                        <br />
                        <br />

                        Bone Cancers, as the name implies, are abnormal clusters of cells found inside bones, and lead to the death of normal bone tissue. The real danger in this type of cancer is how easily it can spread, or <span onClick = "window.open('http://en.wikipedia.org/wiki/Metastasis')"class = "link">metastasize</span> around the body. Since bones exist in practically every system and area of the body, this disease has the potential to be spread almost anywhere.

                        <br />
                        <br />

                        Let's start off by discussing each individual type of bone cancer. As shown through the graph below, Osteosarcomas are easily the most common types of bone cancer, accounting for <span onClick = "window.open('http://www.urmc.rochester.edu/encyclopedia/content.aspx?ContentTypeID=34&ContentID=24884-1')"class = "link">56% of all bone cancer cases</span>. This is followed by Ewing Tumors, and finally, Chondrosarcomas.


                        <br />
                        <br />


                        <div id = "center_element">

                                                        <div style="width: 100%">

                                                                <canvas id="boneStatsPie" height="200" width="430"></canvas>

                                                        </div>

                                                </div>
                        <br />

                        <div id = "center_element">

                        <span style = "color: #F7464A; font-size:22px;">Osteosarcomas</span>
                        <span style = "color: #46BFBD; font-size:22px;">Ewing Tumors</span>
                        <span style = "color: #FDB45C; font-size:22px;">Chondrosarcomas</span>

                        </div>


                        <br /><br />


                        <div class="accordion">
                                <dl>
                                    <dt><a class="accordionTitle" href="#" style = "background-color: #F7464A;">Osteosarcomas</a></dt>
                                    <dd class="accordionItem accordionItemCollapsed">
                                        <p>
                                            Osteosarcomas are the most frequent form of bone cancer, as illustrated by the chart above. Before discussing this form of cancer in detail, it is essential to understand the implications of this cancer in regard to specifically being located in the <span class = "link" onClick = "window.open('http://www.innerbody.com/image/skelfov.html')">skeletal system</span>. It is pretty apparent to most people what the skeletal system does for the body: protection and support. The only reason why the body is able to move the way it is is due to the joints and bones located all over the body.

                                                <br />
                                                <br />

                                            The fact that bones are located everywhere on the body is what makes this form of cancer so dangerous. Osteosarcomas can technically occur anyplace where a bone exists, but <span class = "link" onClick = "window.open('http://www.cancerresearchuk.org/about-cancer/type/bone-cancer/about/types-of-bone-cancer')">most commonly forms near the lower thigh (femur), shin bone (tibia), and the upper arm (humerus).</span> The exact causes of bone cancer are unknown, but it is known that genetics play a key factor in the transmission of this disease.

                                                <br />
                                                <br />

                                            Symptoms of bone cancer vary, depending on the location and size of the tumor. The most common ones include <span class = "link" onClick = "window.open('http://www.cancer.org/cancer/bonecancer/detailedguide/bone-cancer-signs-symptoms')">intense pain at tumor site, rare bone fractures, breathing issues, and unexplained weight loss.</span>


                                                <br />
                                                <br />


                                    </p>
                                    </dd>

                                    <dt><a class="accordionTitle" href="#" style = "background-color: #46BFBD">Ewing Tumors</a></dt>
                                    <dd class="accordionItem accordionItemCollapsed">
                                        <p>

                                            Ewing Tumors account for over 30% of all bone cancer cases. They usually form in the same spots as osteosarcomas, with two exceptions. They can form in the cavities of the leg and arm bones, and can also <span class = "link" onClick = "window.open('http://www.cancerresearchuk.org/about-cancer/type/bone-cancer/about/types-of-bone-cancer')">form in soft tissues of the body near bones.</span>


                                            <br />
                                            <br />


                                            Ewing Tumors are a bit different than Osteosarcomas, because they form from primitive cells, the oldest cells in the body. This doesnt mean they are treated differently: Ewing tumors still contain the same DNA abnormailities, and respond to all methods of treatment the same way other cancerous cells do.


                                            <br />
                                            <br />
                                            As of now, <span class = "link" onClick = "window.open('http://www.webmd.com/cancer/ewings-sarcoma?page=2')">there are no environmental factors that contribute to the development of Ewing Tumors.</span> The only way to protect someone against this disease is to make sure that the person is diagnosed as soon as possible


                    </p>
                    </dd>

                                        <dt><a class="accordionTitle" href="#" style = "background-color: #FDB45C">Chondrosarcomas</a></dt>
                                    <dd class="accordionItem accordionItemCollapsed">
                                        <p>
                                            Chondrosarcomas are different than the other forms of bone cancer in one very specific way. Instead of infecting hard bones, <span class = "link" onClick = "window.open('http://sarcomahelp.org/chondrosarcoma.html')">Chondrosarcomas actually go for the cartilage in the body.</span> They can still form in the hips, ribs and arm bones, but the key difference is that they can attack places with cartilage.

                                        <br />
                                        <br />

                                            Because of the fact that this type of Bone Cancer can affect cartilage, symptoms are the same as osteosarcomas, but with the addition of olfactory (smell) and auditory (hearing) loss, because those two areas are made up of mostly cartilage.


                                        </p>
                    </dd>

                                </div>


                        <br />
                        <p class="line-break margin-top-10"></p>
                        <br />

                        <div id = "anchor_up_second" class = "move_focus_up"> </div>
                        <div id = "goFirst" class = "smaller_header">Advancements in Treatment</div>

                        <br />

                            <span class = "link" onClick = "window.open('http://seer.cancer.gov/statfacts/html/bones.html')">Since 1975, the incidence rates of Bone Cancer have been increasing, not by a massive amount, but still significant enough to be affecting more people</span>. At first glance, this seems like a bad situation. The truth is, in fact, the opposite. Through data, it can be seen that even though the incidence rate has slightly increased, modern medicine and science has forced the death rate to absolutely plunge in these recent decades, through new improved means of treatment and diagnosis that are helping people all across the planet.


                        <br />

                        <div id = "center_element">

                            <div style="width: 100%">

                                <canvas id="BoneStatsLine" height="200" width="430"></canvas>

                            </div>

                        </div>
                        <br/><br />
                        <div id = "center_element" style = "color:gray; font-size:16px;">
                            Bone Cancer Incidence Rates VS. <span style = "color:#98BBCC">Death Rates</span> (rate per 100,000)
                        </div>

                        <br />
                        <br />
                        <div class = "smallest_header" style = "text-decoration:none;">Why the Increase?</div>
                        <br />

                            The significant increase in survival rates can be attributed to not only the extreme advances in modern science and practice of medicine, allowing for more effective methods of treatment that make Bone Cancer easier to deal with, but also the slow. Below are some explanations of the medical staff that will be assisting their patient's treatement, in addition to certain types of new treatment that have been proven to help. Make sure to click on links in the text for even more information.


                        <br />
                        <br />


                            <div class="accordion2">
                                <dl>


                                    <dt><a class="accordionTitle2" href="#memes" style = "background-color: #FDB45C;">Medical Staff</a></dt>
                                    <dd class="accordionItem2 accordionItemCollapsed2">
                                        <p>
                                            Once a patient is diagnosed with any form of Thyroid Cancer, the best doctors and other medical staff work with the patient to create the best possible treatment plan. The <span class = "link" onClick = "window.open('http://www.cancer.net/navigating-cancer-care/cancer-basics/cancer-care-team/types-oncologists')">oncologist</span> is a general cancer doctor that establishes the optimal treatment plan for the patient. The <span class = "link" onClick = "window.open('http://en.wikipedia.org/wiki/Nuclear_medicine_physician')">nuclear medicine doctor</span> is a doctor who specializes in applying radioactive substances to diagnose and treat various thyroid carcinomas. Lastly, the <span class = "link" onClick = "window.open('http://dictionary.reference.com/browse/orthopedist')">Orthopedist</span> is a doctor who specializes in treatment of the joints, muscles, ligaments, and skeletal system.

                                            <br />
                                            <br />

                                            Depending on the type and stage of the cancer and other factors, treatment options for bone cancer can include: <span class = "link" onClick = "window.open('http://www.cancer.net/cancer-types/bone-cancer/treatment-options')">Surgery, radiation therapy (proton therapy), laser therapy, chemotherapy, and certain types of targeted therapy.</span> Sometimes, more than one of type of treatment might be used. In choosing which treatment plan is best for the patient, some important factors to consider include the location and stage of the cancer, the patient's overall health, the chances of curing the disease, and the possible impact of the treatment on the bones.


                                        </p>
                                    </dd>
                                    <dt><a class="accordionTitle2" href="#memes" style = "background-color: #F7464A;">Proton Therapy</a></dt>
                                    <dd class="accordionItem2 accordionItemCollapsed2">
                                        <p>
                                            This new development in the bone cancer treatment industry refferred to as <span class = "link" onClick = "window.open('http://www.proton-therapy.org/howit.htm')">Proton Therapy</span> offers an alternative to complete surgery, where the bone in question simply cannot be removed or shifted.

                                            <br />
                                            <br />

                                            In terms of bone cancer, proton therapy is especially revolutionary because it concentrates a beam of focused protons at the diseased section of the bone. It provides enough radiation to kill the cancerous cells, while sparing the surrounding cells.

                                            <br />
                                            <br />

                                            This type of treatment is such a huge breakthrough in modern science, especially when considered that it is considered a form of radiation, without all the negatives consequences.


                                    </dd>
                                    <dt><a href="#memes" class="accordionTitle2" style = "background-color: #46BFBD;">Myeloablative Therapy</a></dt>
                                    <dd class="accordionItem2 accordionItemCollapsed2">
                                        <p>
                                            <span class = "link" onClick = "window.open('http://medical-dictionary.thefreedictionary.com/myeloablative+therapy')">Myeloablative Therapy</span> Is one of the most interesting treatment types that have been invented in the past couple of years. This type of treatment uses strong forms of chemotherapy to attack cancerous cells, especially when spread throughout the body.

                                        <br />
                                        <br />

                                            This form of cancer is unique because it utilizes a new form of treatment that has been becoming more popular over the past couple of years: <span class = "link" onClick = "window.open('http://stemcells.nih.gov/info/basics/pages/basics1.aspx')">stem cells.</span> Traditionally, concentrated chemotherapy would cause the marrow in the bones to be destroyed. Unfortunately during this treatment they are. However, this specific form of therpay actually enables stems cells to come in, replace the bone marrow that was damaged or destroyed, giving a foundation for the patient, while still keeping the other healthy cells alive.

                                            <br />
                                            <br />
                                            This is only scratching the surface of what modern science has brought the world in terms of treatment options, and we hope that <i>you</i> are able to further this process as well, until we finally crack the case of 100% cancer treatment.


                                        </p>
                                    </dd>

                                </dl>

                            </div>
                            <br />
                        <p class="line-break margin-top-10"></p>
                        <br />

                        <div id = "anchor_up_third" class = "move_focus_up"> </div>
                        <div id = "goFirst" class = "smaller_header">How to Help</div>
                        <br />
                           Even though the mortality rate of bone cancers has significantly dropped, it still takes away upwards of 1,500 people every year, most of them children. The incidence rate has shown no sign of letting up, causing pain for thousands of people worldwide every year. Through some of the organizations below, you can help the world get one step closer to relieveing not only current patients in pain, but prevent this problem from ever reoccurring in the future, something that is priceless to humanity. Check out these reputable organizations and take a step forward for the fight against bone cancer today!


                        <br /><br />


                            <div class="accordion3">
                                <dl>
                                    <dt><a class="accordionTitle3" href="#b0ss" style = "background-color: #FDB45C;">Bone Cancer Research Trust</a></dt>
                                    <dd class="accordionItem3 accordionItemCollapsed3">
                                        <p>

                                            <span class = "link" onClick = "window.open('http://www.bonecancerresearch.org.uk')">The Bone Cancer Research Trust</span> is a foundation dedicated to stop the spread of Bone Cancer, and prevent it from limiting people from achieving their dreams. They began in 2006, and aim to provide support for research of bone cancers, raising awareness, providing information, and giving support to the patients already inflicted with bone cancer.

                                            <br />
                                            <br />

                                            The BCRT has funded 35 peer-reviewed research projects since 2006, totalling £1,392,731, which equates to roughly $2,114,792. This massive sum of money has all gone towards the betterment of lives of people with bone cancer, and providing research in orderto prevent bone cancer from spreading even more. You can help take one step forward in this fight by donating money to their cause. Every dollar brings bone cancer closer to it's demise.


                                            <br />
                                            <br />
                                            <span id = "hidden_button" style = "font-size:22px;" onClick = "window.open('http://www.bonecancerresearch.org.uk/f_donate.php')">Donate</span>


                                        </p>
                                    </dd>

                                    <!-- span is put in place to avoid strange alteration on '&' symbol -->

                                    <dt><a class="accordionTitle3" href="#b0ss" style = "background-color: #F7464A">Sunbeam Foundation</a></dt>


                                    <dd class="accordionItem3 accordionItemCollapsed3">
                                        <p>
                                <span class = "link" onClick = "window.open('http://www.lightoflifefoundation.org/')">The Sunbeam Foundation</span> is a foundation that works tirelessly to help against the fight against bone cancer that afflicts young children and teenagers, since they are the ones affected most by this terrible disease.

                                            <br />
                                            <br />

                                            The Sunbeam Foundation, created by songwriter Brad Wolfe to help his dear friend, strives to provide money to fund cutting edge research related to the different forms of bone cancer, in addition to being an all-volunteer corporation.
                                            <br />
                                            <br />

                                            People like you are the ones who keep foundations like these running. Because of you, these foundations are able to keep up their work, and slowly destroy a disease that plauges children around the world. Take a simple step forward, and contribute to the grand battle against Bone Cancer through te Sunbeam Foundation.

                                            <br />
                                            <br />


                                            <span id = "hidden_button" style = "font-size:22px;" onClick = "window.open('https://secure.squarespace.com/commerce/donate?donatePageId=52b79f65e4b0ee585a53a209')">Donate</span>

                                        </p>
                                        </dd>


                                        <dt><a class="accordionTitle3" href="#b0ss" style = "background-color: #46BFBD">Fight At No Cost</a></dt>
                                    <dd class="accordionItem3 accordionItemCollapsed3">
                                        <p>
                                            In order to succeed in the fight for life we must join together and connect. Through social media, the sharing of stories, and advancement in research we, together, have the opportunity to beat bone cancer.

                                            <div id = "button_wrapper">

                                                <!-- Twitter message can be changed anytime. Source for alteration @ http://www.targetinternet.com/how-to-create-pre-written-tweet-buttons-and-links/ -->


                                                <div id = "twitter_button" onClick = "window.open('http://twitter.com/home?status=Blood%20Cancers%20will%20kill%20over%2055K%20people%20this%20year.%20Make%20a%20stand%20and%20join%20the%20fight%20against%20%23Cancer%20at%20(url)')">Tweet it Out</div>

                                                <!-- Facebook doesn't allow pre-written messages, so a link to our page is the next best thing. -->

                                                <div id = "facebook_button">Join us on Facebook</div>

                                            </div>


                                        </p>

                    </dd>


                                </div>

                            <br />
                        <p class="line-break margin-top-10"></p>

                     <br />
                     <div id = "center_element">

                        <div id = "button_special" onClick = "openDisease()">Back to Diseases</div>
                     </div>
                      <br />
                      <br />
                      <br />

                    </div>
                </section>
                </div>


        </span>
        <br />
        <br />
            <div id = "footer_section">


                <span id = "header_link_section">

                    <span id = "link_header">Discover</span>

                    <br />
                    <a href = "cancercloud.html"><span id = "header_link">Word Cloud</span></a>

                    <br />
                    <span id = "header_link">Mobile Apps</span>

                    <br />
                    <a href = "form.html"><span id = "header_link">Feedback</span></a>
                    <br />

                </span>

                    <br />
                    <span id = "social_media_buttons">

                        <a href="http://www.facebook.com/sharer.php?u=http://www.simplesharebuttons.com" target="_blank"><img src="http://www.simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /></a>
                        <a href="http://twitter.com/share?url=http://www.simplesharebuttons.com&text=Simple Share Buttons&hashtags=simplesharebuttons" target="_blank">
                        <img src="http://www.simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /></a>


                    </span>

                <div id = "one_hundey">

                <span id = "credit_logo">

                    &#169 Copyright 2015 TopBox Software. All Rights Reserved

                </span>

            </div>
                <span id = "social_media_buttons">


                </span>


            </div>
            <a href="#header_holder" class="scrollup smoothScroll"><i class="fa fa-arrow-circle-o-up"></i></a>
        </body>
        <script>
    (function($) {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    $('.scrollup').fadeIn();
                } else {
                    $('.scrollup').fadeOut();
                }
            });

            $('.scrollup').click(function () {
                $("html, body").animate({
                    scrollTop: 0
                }, 600);
                return false;
            });
        })(jQuery);


        ( function( window ) {
                'use strict';
                function classReg( className ) {
                    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
                }

                var hasClass, addClass, removeClass;

                if ( 'classList' in document.documentElement ) {
                    hasClass = function( elem, c ) {
                    return elem.classList.contains( c );
                    };

                    addClass = function( elem, c ) {
                        elem.classList.add( c );
                    };
                    removeClass = function( elem, c ) {
                        elem.classList.remove( c );
                    };
                }
                else {
                    hasClass = function( elem, c ) {
                        return classReg( c ).test( elem.className );
                    };
                    addClass = function( elem, c ) {
                        if ( !hasClass( elem, c ) ) {
                            elem.className = elem.className + ' ' + c;
                        }
                    };
                    removeClass = function( elem, c ) {
                        elem.className = elem.className.replace( classReg( c ), ' ' );
                    };
                }

                function toggleClass( elem, c ) {
                    var fn = hasClass( elem, c ) ? removeClass : addClass;
                    fn( elem, c );
                }
                var classie = {
                    hasClass: hasClass,
                    addClass: addClass,
                    removeClass: removeClass,
                    toggleClass: toggleClass,
                    has: hasClass,
                    add: addClass,
                    remove: removeClass,
                    toggle: toggleClass
                };
                if ( typeof define === 'function' && define.amd ) {
                    define( classie );
                } else {
                    window.classie = classie;
                }
            })( window );
            var $ = function(selector){
                return document.querySelector(selector);
            }
            var accordion = $('.accordion');
            accordion.addEventListener("click",function(e) {
                e.stopPropagation();
                e.preventDefault();
                if(e.target && e.target.nodeName == "A") {
                    var classes = e.target.className.split(" ");
                    if(classes) {
                        for(var x = 0; x < classes.length; x++) {
                            if(classes[x] == "accordionTitle") {
                                var title = e.target;
                                var content = e.target.parentNode.nextElementSibling;
                                classie.toggle(title, 'accordionTitleActive');
                                if(classie.has(content, 'accordionItemCollapsed')) {
                                    if(classie.has(content, 'animateOut')){
                                        classie.remove(content, 'animateOut');
                                    }
                                classie.add(content, 'animateIn');
                                }else{
                                    classie.remove(content, 'animateIn');
                                    classie.add(content, 'animateOut');
                                }
                            classie.toggle(content, 'accordionItemCollapsed');
                            }
                        }
                    }
                }
            });


            ( function( window ) {
                'use strict';
                function classReg( className ) {
                    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
                }

                var hasClass2, addClass2, removeClass2;

                if ( 'classList' in document.documentElement ) {
                    hasClass2 = function( elem, c ) {
                    return elem.classList.contains( c );
                    };

                    addClass2 = function( elem, c ) {
                        elem.classList.add( c );
                    };
                    removeClass2 = function( elem, c ) {
                        elem.classList.remove( c );
                    };
                }
                else {
                    hasClass2 = function( elem, c ) {
                        return classReg( c ).test( elem.className );
                    };
                    addClass2 = function( elem, c ) {
                        if ( !hasClass2( elem, c ) ) {
                            elem.className = elem.className + ' ' + c;
                        }
                    };
                    removeClass2 = function( elem, c ) {
                        elem.className = elem.className.replace( classReg( c ), ' ' );
                    };
                }

                function toggleClass2( elem, c ) {
                    var fn = hasClass2( elem, c ) ? removeClass2 : addClass2;
                    fn( elem, c );
                }
                var classie2 = {
                    hasClass2: hasClass2,
                    addClass2: addClass2,
                    removeClass2: removeClass2,
                    toggleClass2: toggleClass2,
                    has2: hasClass2,
                    add2: addClass2,
                    remove2: removeClass2,
                    toggle2: toggleClass2
                };
                if ( typeof define === 'function' && define.amd ) {
                    define( classie2 );
                } else {
                    window.classie2 = classie2;
                }
            })( window );
            var $ = function(selector){
                return document.querySelector(selector);
            }
            var accordion2 = $('.accordion2');
            accordion2.addEventListener("click",function(e) {
                e.stopPropagation();
                e.preventDefault();
                if(e.target && e.target.nodeName == "A") {
                    var classes = e.target.className.split(" ");
                    if(classes) {
                        for(var x = 0; x < classes.length; x++) {
                            if(classes[x] == "accordionTitle2") {
                                var title = e.target;
                                var content = e.target.parentNode.nextElementSibling;
                                classie2.toggle2(title, 'accordionTitleActive2');
                                if(classie2.has2(content, 'accordionItemCollapsed2')) {
                                    if(classie2.has2(content, 'animateOut2')){
                                        classie2.remove2(content, 'animateOut2');
                                    }
                                classie2.add2(content, 'animateIn2');
                                }else{
                                    classie2.remove2(content, 'animateIn2');
                                    classie2.add2(content, 'animateOut2');
                                }
                            classie2.toggle2(content, 'accordionItemCollapsed2');
                            }
                        }
                    }
                }
            });


            ( function( window ) {
                'use strict';
                function classReg( className ) {
                    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
                }

                var hasClass3, addClass3, removeClass3;

                if ( 'classList' in document.documentElement ) {
                    hasClass3 = function( elem, c ) {
                    return elem.classList.contains( c );
                    };

                    addClass3 = function( elem, c ) {
                        elem.classList.add( c );
                    };
                    removeClass3 = function( elem, c ) {
                        elem.classList.remove( c );
                    };
                }
                else {
                    hasClass3 = function( elem, c ) {
                        return classReg( c ).test( elem.className );
                    };
                    addClass3 = function( elem, c ) {
                        if ( !hasClass3( elem, c ) ) {
                            elem.className = elem.className + ' ' + c;
                        }
                    };
                    removeClass3 = function( elem, c ) {
                        elem.className = elem.className.replace( classReg( c ), ' ' );
                    };
                }

                function toggleClass3( elem, c ) {
                    var fn = hasClass3( elem, c ) ? removeClass3 : addClass3;
                    fn( elem, c );
                }
                var classie3 = {
                    hasClass3: hasClass3,
                    addClass3: addClass3,
                    removeClass3: removeClass3,
                    toggleClass3: toggleClass3,
                    has3: hasClass3,
                    add3: addClass3,
                    remove3: removeClass3,
                    toggle3: toggleClass3
                };
                if ( typeof define === 'function' && define.amd ) {
                    define( classie3 );
                } else {
                    window.classie3 = classie3;
                }
            })( window );
            var $ = function(selector){
                return document.querySelector(selector);
            }
            var accordion3 = $('.accordion3');
            accordion3.addEventListener("click",function(e) {
                e.stopPropagation();
                e.preventDefault();
                if(e.target && e.target.nodeName == "A") {
                    var classes = e.target.className.split(" ");
                    if(classes) {
                        for(var x = 0; x < classes.length; x++) {
                            if(classes[x] == "accordionTitle3") {
                                var title = e.target;
                                var content = e.target.parentNode.nextElementSibling;
                                classie3.toggle3(title, 'accordionTitleActive3');
                                if(classie3.has3(content, 'accordionItemCollapsed3')) {
                                    if(classie3.has3(content, 'animateOut3')){
                                        classie3.remove3(content, 'animateOut3');
                                    }
                                classie3.add3(content, 'animateIn3');
                                }else{
                                    classie3.remove3(content, 'animateIn3');
                                    classie3.add3(content, 'animateOut3');
                                }
                            classie3.toggle3(content, 'accordionItemCollapsed3');
                            }
                        }
                    }
                }
            });

        </script>
        </html>