Messed this up… help?

I’m following this guide:
http: //www. netmagazine. com/tutorials/create-clickable-accordion-css-animation

In any case, here’s my HTML:

< div id=" indextopright" >
< section>
< a href=" #intro" id=" intro" >
< h1> Introduction< /h1>
< /a>
< p> Welcome to Shovenose. com! We provide top quality web design in addition to development. We also provide other related
services, such as company logo and graphics, internet site maintenance and redesigns, and more! We also focus of
integrating scripts for instance forum software, information sites, etc. into new or existing websites. Also, if you have already
designed a website, we can flip your idea in to a developed code with our " Design and style to Code" support. All of this
things we do are on the highest quality and are also at extremely aggressive rates! < /p>
< /section>
< section>
< a href=" #testimonials" id=" testimonails" >
< h1> Testimonials< /h1>
< /a>
< p> " Our website was brought to me really rapidly, and I was impressed at the quality and awareness to detail
inside final product. Furthermore, the folks at Shovenose. com helped me find a good web host and even helped me set it
all way up, without charging us extra! " -- Fake Person< /p>
< /section>
< section>
< a href=" #theteam" id=" theteam" >
< h1> This Team< /h1>
< /a>
< p> Only the very best! The Shovenose. com team consists of only the very best, and each new member brings something specific to
the stand. Web design along with development is handled by Michael, whilst most graphics along with logos are handled by
Alejandro. < /p>
< /section>
< /div> <! -- sales techniques indextopright div --> 

And here’s my CSS:

#indextopright
wider: 190px;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0,. 3);
drift: right;

#indextopright p
top: 0;
padding: 0 15px;
flood: hidden;
transition: top. 4s ease-out, padding. 4s ease-out;

#indextopright h1
font-size: 1em;

#indextopright a
display: block;
top: 23px;
line-height: 23px;
backdrop: linear-gradient(#eee, #ccc);
color: #333;
text-decoration: none;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255,. 5);
border-bottom: 1px good #aaa;

#intro
border-radius: 2px 2px 0 0;

#theteam
border-radius: 0 0 3px 3px;

#indextopright a: hover, a: center
opacity:. 9;

#indextopright a: active
background: linear-gradient(#ccc, #ddd);
color: #000;

#indextopright: concentrate on + p
padding: 10px 15px;
border-bottom: 1px good #ccc;

#intro: concentrate on + p
top: 70px;

#testimonials: concentrate on + p
top: 230px;

#theteam: concentrate on
border-radius: 0;

#theteam: concentrate on + p
top: 180px;

However, I get a lot of crap instead regarding what I’m designed to get:

Any kind of help much valued!!

I put it within a JSFiddle, and nothing comes about (using IE8 on the gov’t computer at the center east, so that may not be saying much). I can’t get to my site from here to retrieve it in your case, but if you are willing to try a jQuery alternative, I’ve done such as what I suspect you’re seeking to do on my portfolio page. The item uses jQuery, and only basic CSS. The script that can make it work is within a file called " internet site. js", which has most of my custom jQuery for your site in it. The section you want should be commented as such. Just view source to find the file. You’re welcome to use it if you appreciate.

In any other case, I’ll look on it when I get back to my room immediately after work, and see if I may help you get your variant working.

I’d like to get it handling just CSS… but if it doesn’t work I may use yours I might appreciate if you could help figure out what’s up with mine and why it is not working.. thanks!

Acceptable! Improvment!
This gibberish is gone now… but the results still don’t work and yes it doesn’t look in the least like it does within the demo of the tutorial!
Mind you, if you be interested in it in motion click the Shovenose. com link in my siggy… in case you are lucky, it’ll insert. if your unlucky, it’ll still insert. LOL!

Functions fine in Chrome. I think that might be your problem: visitor support.

You’re inside Desert Stay pointed man…

With thanks.

No it does not work right.
Assess mine to http: //playground. deaxon. com/css/accordion/ theirs provides the gradients and slides in and out while mine just snaps inside and out…

Many of the rest of that may be just some special CSS3 icing: transitions and gradients. The function of it just appears to use the: target state because means to change the type and model of the div. Go here to read nore about it: http: //reference. sitepoint. com/css/pseudoclass-target

WE copy and pasted my verizon prepaid phone directly, except for starterst change.
Really do not it work

Depends on what you evolved, or if your existing CSS is actually bumping heads using the new CSS

Acceptable, so #indextopright in front of all the CSS things hard because I squeeze whole thing from a div id=" indextopright"

apologies, at least i got it lined up now. but the fancy effects aren’t working still

You do not have any vendor prefixes in your transitions and gradients. That’s probably the location where the problem is. You’ll still should use them for the good while until all of the standards are endorsed.

YAY THE ITEM WORKS! thank an individual!

This appears cool. I’m gunna try this.
RonRoe
Be Frosty.