CODEWITHSUNDEEP
javascriptcsshtml
Toby van Kempen
Toby van Kempen

Reputation: 1487

Toggling a div on the click of an other div

I would love to know how to toggle a div when I click on an other div. For instance, I have couple of buttons, and one of them is called "about". Now, when I click on that button, I want a div to toggle on the bottom of the page. I also would like to know how to make it so that if the user clicks on a different button, say, "work", it toggles the about page off and the work page on. I believe it's possible to do this with jQuery, but I have absolutely zero experience with it. All help greatly appreciated!

HTML

<div id="mainmenu">
    <p id="welcome1">Welcome to my website.</p>
    <p id="welcome2">Please click on one of the smaller circles.</p>
    <div id="mainmenubg"></div>

    <div id="about">
        <p id="about1">ABOUT</p>
        <div class="bg"></div>
    </div>



    <div id="work">
        <p id="work1">WORK</p>
        <div class="bg"></div>
    </div>


    <div id="school">
        <p id="school1">SCHOOL</p>
        <div class="bg"></div>
    </div>


    <div id="contact">
        <p id="contact1">CONTACT</p>
        <div class="bg"></div>
    </div>
</div>

CSS

/*The biggest parts in this style sheet are the animation codes. They take up the most, because they are compatible with almost all (updated) browsers.*/ 

/*Let's give that sucker a background image first.*/
body 
{
background-image:url('bg.png');
}

#mainmenu{
  animation: mainmenu ease 2s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: mainmenu ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: mainmenu ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: mainmenu ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: mainmenu ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

  /*Normal properties start here*/
    border-radius: 50%/50%;
    border-style:solid; 
    border-width:106px;
    border-color: #636363;
    width: 400px;
    height: 400px;
    xbackground: white;

    z-index:9001;


    position:absolute;
    left:100px;
    top:100px;
}

@keyframes mainmenu{
  0% {
    opacity:0;
    transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes mainmenu{
  0% {
    opacity:0;
    -moz-transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes mainmenu {
  0% {
    opacity:0;
    -webkit-transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes mainmenu {
  0% {
    opacity:0;
    -o-transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes mainmenu {
  0% {
    opacity:0;
    -ms-transform:  rotate(-360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}


#about{
  animation: about ease 5s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: about ease 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: about ease 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: about ease 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: about ease 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

    border-radius: 50%/50%;
    border-style:solid; 
    border-width:10px;
    border-color: #636363;
    width: 100px;
    height: 100px;

    position:absolute;
    left:500px;
    top:-100px;
}

@keyframes about{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes about{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    -moz-transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    -moz-transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes about {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    -webkit-transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    -webkit-transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes about {
  0% {
    opacity:0;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    -o-transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    -o-transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes about {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  49% {
    opacity:0;
    -ms-transform:  scaleY(1) ;
  }
  50% {
    opacity:1;
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  52% {
    -ms-transform:  scaleX(2) scaleY(2) ;
  }
  56% {
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}


#work{
  animation: work ease 5s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: work ease 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: work ease 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: work ease 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: work ease 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

    border-radius: 50%/50%;
    border-style:solid; 
    border-width:10px;
    border-color: #636363;
    width: 100px;
    height: 100px;

    position:absolute;
    left:550px;
    top:50px;
}

@keyframes work{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes work{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    -moz-transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    -moz-transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes work {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    -webkit-transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    -webkit-transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes work {
  0% {
    opacity:0;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    -o-transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    -o-transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes work {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  52% {
    opacity:0;
    -ms-transform:  scaleY(1) ;
  }
  53% {
    opacity:1;
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  55% {
    -ms-transform:  scaleX(2) scaleY(2) ;
  }
  59% {
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}


#school{
  animation: school ease 5s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: school ease 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: school ease 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: school ease 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: school ease 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

    border-radius: 50%/50%;
    border-style:solid; 
    border-width:10px;
    border-color: #636363;
    width: 100px;
    height: 100px;

    position:absolute;
    left:550px;
    top:210px;
}

@keyframes school{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes school{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    -moz-transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    -moz-transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes school {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    -webkit-transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    -webkit-transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes school {
  0% {
    opacity:0;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    -o-transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    -o-transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes school {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  55% {
    opacity:0;
    -ms-transform:  scaleY(1) ;
  }
  56% {
    opacity:1;
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  58% {
    -ms-transform:  scaleX(2) scaleY(2) ;
  }
  62% {
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}


#contact{
  animation: contact ease 5s;
  animation-iteration-count: 1;
  transform-origin: ;
  -webkit-animation: contact ease 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -moz-animation: contact ease 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: ;
  -o-animation: contact ease 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: ;
  -ms-animation: contact ease 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: ;

    border-radius: 50%/50%;
    border-style:solid; 
    border-width:10px;
    border-color: #636363;
    width: 100px;
    height: 100px;

    position:absolute;
    left:500px;
    top:360px;    

}

@keyframes contact{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes contact{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    -moz-transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    -moz-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes contact {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    -webkit-transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    -webkit-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes contact {
  0% {

    opacity:0;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    -o-transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    -o-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes contact {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  58% {
    opacity:0;
  }
  59% {
    opacity:1;
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  61% {
    -ms-transform:  scaleX(2) scaleY(2) ;
  }
  65% {
    -ms-transform:  scaleX(1) scaleY(1) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}




/*These are the large coloured circles around the buttons.*/
#mainmenubg{
    border-radius: 50%/50%;
    border-style:solid; 
    border-width:100px;
    border-color: #91A6BC;
    width: 406px;
    height: 406px;

    position:absolute;
    left:-103px;
    top:-103px;
}

/*Pay heed! This one here is a CLASS, not an ID!*/
.bg{
    border-radius: 50%/50%;
    border-style:solid; 
    border-width:5px;
    border-color: #91A6BC;
    width: 104px;
    height: 104px;

    position:absolute;
    left:-7px;
    top:-7px;
}




/*Below here are all the paragraphs and similiar things. They are all IDs.*/
#welcome1{
    font-size:35px;
    font-family: HelveticaNeue-UltraLight;
    letter-spacing: 5px;
    color:#404040;

    width:300px;

    position:absolute;
    top:30px;
    left:50px;
    text-align:center;
}


#welcome2{
    font-size:25px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 3px;
    color:#7A7A7A;

    width:300px;

    position:absolute;
    top:150px;
    left:50px;
    text-align:center;
}


#about1{
    font-size:25px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 2px;
    color:#404040;

    text-align:center;

    position:absolute;
    top:10px;
    left:6px;
}


#work1{
    font-size:25px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 2px;
    color:#404040;

    text-align:center;

    position:absolute;
    top:10px;
    left:10px;
}


#school1{
    font-size:22px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 1px;
    color:#404040;

    text-align:center;

    position:absolute;
    top:15px;
    left:3px;
}


#contact1{
    font-size:20px;
    font-family: HelveticaNeue-Thin;
    letter-spacing: 1px;
    color:#404040;

    text-align:center;

    position:absolute;
    top:19px;
    left:3px;
}

Link for my small project: http://speedy.sh/V6fqw/project.zip

JSFiddle (Thanks to Kimmax)

EDIT: So, as you can see on the right side, there are four buttons. What I want is that if a user were to click on one of them, a div on the bottom of the page gently fades in, the speed of which similar to the speed of the large circle.

Upvotes: 0

Views: 141

Answers (1)

Kimmax
Kimmax

Reputation: 1697

The Idea

Create a container for the content. This container should be filled with divs for your content and every single div in the container should get the content class. Also every single div in the container needs and unique ID. Add a class to every circle that should trigger a content change, but use the same class for every circle (For example trigger or circle). The next step is to specific the content which should be loaded in a data-xx attribute and use the ID you specified in the content divs before as identifier, as an example data-id or data-content.
Now it comes to Javascript. Register an click event with the class you added to your triggers. When the event now fires, fade the current content out by calling .fadeOut() on the content class. After that get the sender via jQuerys this and receive the content-id by using the .data function. Now we can call .fadeIn() on the element that raised the click event and we are done.

Implementation

Adjust the triggers

<div id="about" class="trigger" data-content="contentAbout">
</div>

First I added the class trigger so we can handle click events for it.
Secondly I added the data-content attribute, so we know what content should be shown later.

Adjust the content box

<div id="contentAbout" class="content">
</div>

Fist I set the id of the div to something that says whats in it. content + whats in it About.
Secondly the div needs to know that its a content div so add the class content.

The content holder

All the content divs have to be holed together, so we need to wrap with another div. 

<div id="contentHolder">
    <!-- Content boxes go in here -->
</div>

CSS magic

We need to hide the content until it should be shown, so define a rule in the css-sheet for that. 

.content {
    display: none;
}

This will hide the content boxes until we fade them in later.
Also we need adjust the position of the content-holder so it will be shown at the bottom.
Example:

#contentHolder {
    position: absolute;
    bottom: -500px;
    height: 300px;
    width: 100%;
}

Time for the real magic

After finishing all the preparatory work, we can create our Javascript to get life in our little thing. 

$(function() {
    $(".circle").click(function(){
        $(".content").fadeOut();
        $("#" + $(this).data("id")).fadeIn();
    });
});


$(function() {
}

will be executed as soon as the page finished loading.

$(".trigger").click(function(){
});

registers an click event on all elements with the class trigger. Everything in the function will be executed when the user clicks on one of the element.

$(".content").fadeOut();

fades out every element with the id content. And

$("#" + $(this).data("content")).fadeIn();

fades in the element that matches the id specified in the data-content attribute.

Please note that you of curse have to include jQuery in the <head> section of your document. Example include:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Done

Upvotes: 1

Related Questions