API tools faq
paste
bsethemes

AIO theme

bsethemes
Feb 20th, 2015
1,895
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. All-In-One Theme Base Code by Paige @neonbikethemes.tumblr.com
  8.  
  9. THEME BY BSETHEMES!!!!!!!!
  10.  
  11. -don't remove credit
  12. -don't change credit
  13. -don't claim as your own
  14. -don't repost as your own
  15. -for any questions, feedback or theme requests please don't hesitate to contact me
  16.  
  17.  
  18. there are no meta tags so you need to style and add everything on your own, don't worry everything is explained as best as possible!!!
  19.  
  20. if you made a mistake use ctrl + z
  21.  
  22. -->
  23. <title>{Title}</title>
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  28.  
  29.  
  30. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  31.  
  32. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  33.  
  34. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  35.  
  36. <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  37.  
  38. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  39. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  40. <script>
  41. (function($){
  42. $(document).ready(function(){
  43. $("a[title]").style_my_tooltips({
  44. tip_follows_cursor:true,
  45. tip_delay_time:90,
  46. tip_fade_speed:600,
  47. attribute:"title"
  48. });
  49. });
  50. })(jQuery);
  51. </script>
  52.  
  53.  
  54. <style type="text/css">
  55.  
  56. /* ---------------------------- GENERAL ----------------------------- */
  57.  
  58. /* -------- SELECTION TOOL ------- */
  59.  
  60. ::-moz-selection {
  61. background: #e5e5e5; /*selection background color*/
  62. color: #c0c0c0; /*selection text color*/
  63. }
  64.  
  65. ::selection {
  66. background: #e5e5e5; /*selection background color*/
  67. color: #c0c0c0; /*selection text color (for a different browser)*/
  68. }
  69.  
  70. /* -------- SCROLLBAR ------- */
  71.  
  72. ::-webkit-scrollbar {
  73. width: 3px; /* scrollbar width */
  74. }
  75.  
  76. /* Track */
  77. ::-webkit-scrollbar-track {
  78. background:#fbfbfb; /* scrollbar background color */
  79. }
  80.  
  81. /* Handle */
  82. ::-webkit-scrollbar-thumb {
  83. background:#c0c0c0; /* scrollbar thumb color */
  84. }
  85. ::-webkit-scrollbar-thumb:window-inactive {
  86. background: transparent; /* don't touch this */
  87. }
  88.  
  89. /* ------- TOOLTIPS (don't touch) ------ */
  90.  
  91. #s-m-t-tooltip {
  92. max-width:200px;
  93. margin:25px 20px 25px 20px;
  94. background:#fcfcfc;
  95. color:#000;
  96. font-family:'arial';
  97. border:1px dotted white;
  98. font-size:10px;
  99. line-height:13px;
  100. padding:3px 5px 4px 5px;
  101. opacity:.1;
  102. border: 1px solid #e5e5e5;
  103. -webkit-box-shadow: 3px 3px 0px -1px rgba(0,0,0,0.08);
  104. -moz-box-shadow: 3px 3px 0px -1px rgba(0,0,0,0.08);
  105. box-shadow: 3px 3px 0px -1px rgba(0,0,0,0.08);
  106. -webkit-transition: all 0.2s ease-out;
  107. -moz-transition: all 0.2s ease-out;
  108. transition: all 0.2s ease-out;
  109. z-index:999999999999999999999999999999999999;
  110. }
  111.  
  112. /* -------- BASICS ------- */
  113.  
  114. body {
  115. background: #fff; /* background color */
  116. color: #a7a7a7; /* text color */
  117. font-family: helvetica, arial; /* the fonts, i advise to not change them */
  118. font-size: 11px; /* font size */
  119. margin: 30px; /* don't touch this */
  120. padding: 0;/* don't touch this */
  121. word-wrap: break-word;/* don't touch this */
  122. line-height:150%;/* don't touch this */
  123. }
  124.  
  125. a {
  126. color: #bad8eb; /* link color */
  127. text-decoration: none; /* don't touch this */
  128. -webkit-transition: all .3s;/* don't touch this */
  129. -moz-transition: all .3s; /* don't touch this */
  130. -o-transition: all .3s; /* don't touch this */
  131. -ms-transition: all .3s; /* don't touch this */
  132. transition: all .3s; /* don't touch this */
  133. }
  134.  
  135. a:hover{
  136. color: #dcecf5; /* link hover color */
  137. -webkit-transition: all .3s; /* don't touch this */
  138. -moz-transition: all .3s; /* don't touch this */
  139. -o-transition: all .3s; /* don't touch this */
  140. -ms-transition: all .3s; /* don't touch this */
  141. transition: all .3s; /* don't touch this */
  142. }
  143.  
  144. }
  145. /* don't touch this */
  146. iframe, img, embed, object, video {
  147. max-width: 100%;
  148. }
  149. /* don't touch this */
  150. p{
  151. margin-bottom:10px;
  152. }
  153. /* don't touch this */
  154. img {
  155. height: auto;
  156. width:auto;
  157. max-width:100%;
  158. }
  159. /* don't touch this */
  160. h1{
  161. text-transform:uppercase;
  162. font-size:13px;
  163. }
  164. /* don't touch this */
  165. ul{
  166. list-style-type:square;
  167. }
  168. /* don't touch this */
  169. ol{
  170. list-style-type:;
  171. }
  172. /* don't touch this */
  173. #bigcon{
  174. width:520px;
  175. margin-left:auto;
  176. margin-right:auto;
  177. }
  178. /* don't touch this */
  179. .tabcontent {
  180. position:static;
  181. margin-left:auto;
  182. margin-right:auto;
  183. width: 520px;
  184. text-align:center;
  185. margin-bottom:200px;
  186. }
  187. /* don't touch this */
  188. .tabcontent h2{
  189. color:#c0c0c0;
  190. margin-left:-200px;
  191. letter-spacing:2px;
  192. }
  193.  
  194. /* ----------------------------- HEADER STUFF ---------------------------*/
  195. /* don't touch this */
  196. #topbar{
  197. position:static;
  198. margin-top:50px;
  199. margin-bottom:50px;
  200. text-align:center;
  201. }
  202. /* don't touch this */
  203. .blogtitle{
  204. margin-bottom:20px;
  205. text-transform:uppercase;
  206. font-size:12px;
  207. letter-spacing:2px;
  208. font-weight:bold;
  209. }
  210. /* don't touch this */
  211. .description{
  212. margin-bottom:20px;
  213. letter-spacing:1px;
  214. }
  215. /* don't touch this */
  216. #navbar{
  217. display:inline-block;
  218. text-align:center;
  219. }
  220.  
  221. /*----------------------------- INSIDE STUFF -----------------------------*/
  222.  
  223. /*------------------ about -----------------*/
  224. /* don't touch this */
  225. .about img {
  226. margin-left:50px;
  227. width:140px;
  228. border-radius: 200px 200px 200px 200px;
  229. -moz-border-radius: 200px 200px 200px 200px;
  230. -webkit-border-radius: 200px 200px 200px 200px;
  231. border: 3px solid #f9f9f9;
  232. -webkit-box-shadow: 0px 0px 4px 1px rgba(194,194,194,0.65);
  233. -moz-box-shadow: 0px 0px 4px 1px rgba(194,194,194,0.65);
  234. box-shadow: 0px 0px 4px 1px rgba(194,194,194,0.65);
  235. }
  236. /* don't touch this */
  237. .about q {
  238. text-decoration:italic;
  239. letter-spacing:2px;
  240. font-size:12px;
  241. }
  242. /* don't touch this */
  243. #info {
  244. margin-top:30px;
  245. margin-left:150px;
  246. border-bottom:1px solid #c0c0c0;
  247. letter-spacing:1px;
  248. max-width:250px;
  249. font-size:11px;
  250. }
  251.  
  252. /*----------- Links -------------*/
  253.  
  254. .links a {
  255. background: #fcfcfc;/* links background color */
  256. letter-spacing:2px;
  257. font-size:12px;
  258. margin-left:10px;
  259. text-decoration:none;
  260. text-transform:uppercase;
  261. padding:10px;
  262. padding-right:80px;
  263. padding-left:80px;
  264. color: #a7a7a7; /* links color */
  265. border: 1px solid #e5e5e5; /* links border color */
  266. -webkit-box-shadow: 10px 10px 0px -4px rgba(0,0,0,0.29);
  267. -moz-box-shadow: 10px 10px 0px -4px rgba(0,0,0,0.29);
  268. box-shadow: 10px 10px 0px -4px rgba(0,0,0,0.29);
  269. -webkit-transition: all 0.9999999999999999s ease-out;
  270. -moz-transition: all 0.9999999999999999s ease-out;
  271. transition: all 0.9999999999999999s ease-out;
  272. }
  273.  
  274. .links a:hover {
  275. color: #535353; /* link color on hover */
  276. border:1px solid #fff;
  277. -webkit-box-shadow: 3px 3px 0px -1px rgba(0,0,0,0);
  278. -moz-box-shadow: 3px 3px 0px -1px rgba(0,0,0,0);
  279. box-shadow: 3px 3px 0px -1px rgba(0,0,0,0);
  280. -webkit-transition: all 0.9999999999999999s ease-out;
  281. -moz-transition: all 0.9999999999999999s ease-out;
  282. transition: all 0.9999999999999999s ease-out;
  283. }
  284.  
  285.  
  286. /*------tags ------*/
  287. .taggytags {
  288. max-height:200px;
  289. width:450px;
  290. padding:10px;
  291. background:#fcfcfc; /* tags background color */
  292. overflow:auto;
  293. border:1px solid #e5e5e5; /* tags border color */
  294. margin-left:25px;
  295. -webkit-box-shadow: 10px 10px 0px -4px rgba(0,0,0,0.29);
  296. -moz-box-shadow: 10px 10px 0px -4px rgba(0,0,0,0.29);
  297. box-shadow: 10px 10px 0px -4px rgba(0,0,0,0.29);
  298. }
  299.  
  300. .taggytags a {
  301. color:#a7a7a7; /* tags color */
  302. letter-spacing:1px;
  303. }
  304.  
  305. .taggytags a:hover{
  306. background-color:#a7a7a7; /* tags background color on hover */
  307. color:#fff; /* tags color on hover */
  308. }
  309.  
  310. /*------Blogroll ------*/
  311.  
  312. /* don't touch this */
  313. #broll img {
  314. border-radius: 200px 200px 200px 200px;
  315. -moz-border-radius: 200px 200px 200px 200px;
  316. -webkit-border-radius: 200px 200px 200px 200px;
  317. border: 3px solid #f9f9f9;
  318. -webkit-box-shadow: 0px 0px 4px 1px rgba(194,194,194,0.65);
  319. -moz-box-shadow: 0px 0px 4px 1px rgba(194,194,194,0.65);
  320. box-shadow: 0px 0px 4px 1px rgba(194,194,194,0.65);
  321. }
  322. /*-------------------------------- FAQ ----------------------------------*/
  323.  
  324. /* don't touch this */
  325. #faq {
  326. font-size:13px;
  327. }
  328.  
  329. #faq li {
  330. background: #fcfcfc; /* questions background color */
  331. letter-spacing:2px;
  332. font-size:10px;
  333. text-decoration:none;
  334. text-transform:uppercase;
  335. padding:4px;
  336. border: 1px solid #e5e5e5; /* questions border color */
  337. -webkit-box-shadow: 7px 7px 0px -4px rgba(0,0,0,0.08);
  338. -moz-box-shadow: 7px 7px 0px -4px rgba(0,0,0,0.08);
  339. box-shadow: 7px 7px 0px -4px rgba(0,0,0,0.08);
  340. }
  341.  
  342.  
  343.  
  344. /* --------------------- TABS (don't touch any of this) ----------------------*/
  345.  
  346. .tabs {
  347. width:100%;
  348. margin-left:0px;
  349. display:inline-block;
  350. }
  351.  
  352. /*----- Tab Links -----*/
  353. /* don't touch this */
  354. /* Clearfix */
  355. .tab-links:after {
  356. display:block;
  357. clear:both;
  358. content:'';
  359. }
  360. /* don't touch this */
  361. .tab-links li {
  362. margin-right:5px;
  363. display:inline-block;
  364. list-style:none;
  365. text-transform:uppercase;
  366. }
  367.  
  368. .tab-links a {
  369. padding:7px;
  370. display:inline-block;
  371. color: #bad8eb; /* color of the tab titles */
  372. letter-spacing:1px;
  373. transition:all linear 0.15s;
  374. border-bottom:1px solid transparent;
  375. }
  376.  
  377. .tab-links a:hover {
  378. border-bottom:1px solid #fff; /* color of the line under the tab titles on hover */
  379. letter-spacing:1px
  380. text-decoration:none;
  381. }
  382.  
  383. li.active a, li.active a:hover {
  384. background:transparent;
  385. color: #bad8eb; /* color of the open tab title */
  386. border-bottom:1px solid #bad8eb; /* color of the line under the open tab title */
  387. background: #fff; /* color of the background of the open tab title */
  388. -webkit-transition: all .3s;
  389. -moz-transition: all .3s;
  390. -o-transition: all .3s;
  391. -ms-transition: all .3s;
  392. transition: all .3s;
  393. }
  394.  
  395.  
  396.  
  397. /*----- Content of Tabs (don't touch any of this) -----*/
  398. .tab-content {
  399. }
  400.  
  401. .tab {
  402. display:none;
  403. }
  404.  
  405. .tab.active {
  406. display:block;
  407. }
  408.  
  409. /* --------------------------- Custom CSS -------------------------- */
  410. {CustomCSS}
  411. </style>
  412. </head>
  413. <body>
  414.  
  415.  
  416. <div id="bigcon">
  417.  
  418.  
  419. <!--TOPBAR-->
  420.  
  421. <div id="topbar">
  422.  
  423. <div class="blogtitle">
  424. <a href="/">Title one</a>
  425. </div>
  426.  
  427. <div class="description">title two / description</div>
  428.  
  429. <div id="navbar">
  430. <div class="tabs">
  431. <ul class="tab-links">
  432. <li class="active" style="margin-left:-30px">
  433. <a href="#tab1">About</a></li>
  434. <li><a href="#tab2">Links</a></li>
  435. <li><a href="#tab3">Tags</a></li>
  436. <li><a href="#tab4">Blogroll</a></li>
  437. <li><a href="#tab5">FAQ</a></li>
  438. <li><a href="http://bsethemes.tumblr.com/" title="credit">©</a></li>
  439. </ul>
  440. </div>
  441. </div>
  442.  
  443. </div>
  444.  
  445.  
  446. <!-- --------------------------- TABS -------------------------- -->
  447.  
  448.  
  449. <div class="tabs">
  450.  
  451.  
  452. <!-- --------------------------- ABOUT -------------------------- -->
  453. <div id="tab1" class="tab active">
  454. <div class="tab-content">
  455. <div class="about">
  456.  
  457.  
  458. <img src="https://lh4.googleusercontent.com/-i1bV_i02lLE/AAAAAAAAAAI/AAAAAAAAAHQ/dWmLcrZtxE4/photo.jpg"/>
  459.  
  460. <i><q>Lorem ipsum dolor sit amet consectetur.</q></i>
  461.  
  462.  
  463. <div id="info">Name: Name</div>
  464. <div id="info">Age: Age</div>
  465. <div id="info">Hobbies: Hobbies</div>
  466. <div id="info">Info: Info</div>
  467. <div id="info">Info: Info</div>
  468. <div id="info">Lorem ipsum dolor sit amet, adipiscing elit. Morbi interdum, odio vel venenatis elementum, tellus dui facilisis leo, nec tincidunt tortor neque ac erat. Nam vel erat vitae elit lobortis hendrerit et ac eros. Sed risus sem, sollicitudin quis lacus quis, volutpat aliquet metus. Duis sagittis sapien sapien, id gravida lectus ornare sed. Suspendisse imperdiet diam mi, et sagittis justo semper ac. Maecenas porttitor vel nibh et porta. Suspendisse vel justo arcu. Proin id accumsan nisi.</div>
  469.  
  470. </div>
  471. </div>
  472. </div>
  473.  
  474. <!-- -------------------------- LINKS -------------------------- -->
  475.  
  476. <div id="tab2" class="tab">
  477. <div class="tabcontent">
  478.  
  479. <div class="links">
  480. <a href="http://">Link</a>
  481. <a href="http://">Link</a><br><br><br>
  482. <a href="http://">Link</a>
  483. <a href="http://">Link</a><br><br><br>
  484. <a href="http://">Link</a>
  485. <a href="http://">Link</a><br><br><br>
  486. <a href="http://">Link</a>
  487. <a href="http://">Link</a><br><br><br>
  488.  
  489. </div>
  490. </div>
  491. </div>
  492.  
  493.  
  494. <!-- -------------------------- TAGS -------------------------- -->
  495.  
  496. <div id="tab3" class="tab">
  497. <div class="tabcontent">
  498. <h2>Category Title</h2>
  499. <div class="taggytags">
  500.  
  501. <a href="/">Tag</a> ○
  502. <a href="/">Tag</a> ○
  503. <a href="/">Tag</a> ○
  504. <a href="/">Tag</a> ○
  505. <a href="/">Tag</a> ○
  506. <a href="/">Tag</a> ○
  507. <a href="/">Tag</a> ○
  508. <a href="/">Tag</a> ○
  509. <a href="/">Tag</a> ○
  510. <a href="/">Tag</a> ○
  511. <a href="/">Tag</a> ○<br>
  512. <a href="/">Tag</a> ○
  513. <a href="/">Tag</a> ○
  514. <a href="/">Tag</a> ○
  515. <a href="/">Tag</a> ○
  516. <a href="/">Tag</a> ○
  517. <a href="/">Tag</a> ○
  518. <a href="/">Tag</a> ○
  519. <a href="/">Tag</a> ○
  520. <a href="/">Tag</a> ○
  521. <a href="/">Tag</a> ○
  522. <a href="/">Tag</a> ○<br>
  523. <a href="/">Tag</a> ○
  524. <a href="/">Tag</a> ○
  525. <a href="/">Tag</a> ○
  526. <a href="/">Tag</a> ○
  527. <a href="/">Tag</a> ○
  528. <a href="/">Tag</a> ○
  529. <a href="/">Tag</a> ○
  530. <a href="/">Tag</a> ○
  531. <a href="/">Tag</a> ○
  532. <a href="/">Tag</a> ○
  533. <a href="/">Tag</a> ○<br>
  534. </div><br>
  535.  
  536. <h2>Category Title</h2>
  537. <div class="taggytags">
  538.  
  539. <a href="/">Tag</a> ○
  540. <a href="/">Tag</a> ○
  541. <a href="/">Tag</a> ○
  542. <a href="/">Tag</a> ○
  543. <a href="/">Tag</a> ○
  544. <a href="/">Tag</a> ○
  545. <a href="/">Tag</a> ○
  546. <a href="/">Tag</a> ○
  547. <a href="/">Tag</a> ○
  548. <a href="/">Tag</a> ○
  549. <a href="/">Tag</a> ○<br>
  550. <a href="/">Tag</a> ○
  551. <a href="/">Tag</a> ○
  552. <a href="/">Tag</a> ○
  553. <a href="/">Tag</a> ○
  554. <a href="/">Tag</a> ○
  555. <a href="/">Tag</a> ○
  556. <a href="/">Tag</a> ○
  557. <a href="/">Tag</a> ○
  558. <a href="/">Tag</a> ○
  559. <a href="/">Tag</a> ○
  560. <a href="/">Tag</a> ○<br>
  561. <a href="/">Tag</a> ○
  562. <a href="/">Tag</a> ○
  563. <a href="/">Tag</a> ○
  564. <a href="/">Tag</a> ○
  565. <a href="/">Tag</a> ○
  566. <a href="/">Tag</a> ○
  567. <a href="/">Tag</a> ○
  568. <a href="/">Tag</a> ○
  569. <a href="/">Tag</a> ○
  570. <a href="/">Tag</a> ○
  571. <a href="/">Tag</a> ○<br>
  572. </div><br>
  573.  
  574. <h2>Category Title</h2>
  575. <div class="taggytags">
  576.  
  577. <a href="/">Tag</a> ○
  578. <a href="/">Tag</a> ○
  579. <a href="/">Tag</a> ○
  580. <a href="/">Tag</a> ○
  581. <a href="/">Tag</a> ○
  582. <a href="/">Tag</a> ○
  583. <a href="/">Tag</a> ○
  584. <a href="/">Tag</a> ○
  585. <a href="/">Tag</a> ○
  586. <a href="/">Tag</a> ○
  587. <a href="/">Tag</a> ○<br>
  588. <a href="/">Tag</a> ○
  589. <a href="/">Tag</a> ○
  590. <a href="/">Tag</a> ○
  591. <a href="/">Tag</a> ○
  592. <a href="/">Tag</a> ○
  593. <a href="/">Tag</a> ○
  594. <a href="/">Tag</a> ○
  595. <a href="/">Tag</a> ○
  596. <a href="/">Tag</a> ○
  597. <a href="/">Tag</a> ○
  598. <a href="/">Tag</a> ○<br>
  599. <a href="/">Tag</a> ○
  600. <a href="/">Tag</a> ○
  601. <a href="/">Tag</a> ○
  602. <a href="/">Tag</a> ○
  603. <a href="/">Tag</a> ○
  604. <a href="/">Tag</a> ○
  605. <a href="/">Tag</a> ○
  606. <a href="/">Tag</a> ○
  607. <a href="/">Tag</a> ○
  608. <a href="/">Tag</a> ○
  609. <a href="/">Tag</a> ○<br>
  610. </div>
  611.  
  612. </div>
  613. </div>
  614.  
  615.  
  616. <!-- -------------------------- BLOGROLL -------------------------- -->
  617.  
  618. <div id="tab4" class="tab">
  619. <div class="tabcontent">
  620. <div id="broll">
  621. {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}">{/block:Followed}{/block:Following}
  622.  
  623. </a></div>
  624. </div>
  625. </div>
  626.  
  627. <!-- -------------------------- FAQ -------------------------- -->
  628. <div id="tab5" class="tab">
  629. <div class="tabcontent">
  630. <div id="faq">
  631. <li>question?</li><br>
  632. answer
  633. <br><br><li>question?</li><br>
  634. answer
  635. <br><br><li>question?</li><br>
  636. answer
  637. <br><br><li>question?</li><br>
  638. answer
  639.  
  640. </div>
  641. <br><br><br><iframe frameborder="0" border="0" scrolling="no" width="450" height="200" allowtransparency="true" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  642.  
  643. </div>
  644. </div>
  645.  
  646.  
  647.  
  648. <!-- END OF TABS -->
  649.  
  650. </div>
  651. </div>
  652. </div>
  653. </div>
  654. </div>
  655.  
  656.  
  657. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  658.  
  659. <script>
  660. $(document).ready(function() {
  661. $('.tabs .tab-links a').on('click', function(e) {
  662. var currentAttrValue = $(this).attr('href');
  663.  
  664. // Show/Hide Tabs
  665. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  666.  
  667. // Change/remove current tab to active
  668. $(this).parent('li').addClass('active').siblings().removeClass('active');
  669.  
  670. e.preventDefault();
  671. });
  672. });
  673. </script>
  674.  
  675. <script>
  676. $(document).ready(function() {
  677. $('#filterOptions li a').click(function() {
  678. // fetch the class of the clicked item
  679. var ourClass = $(this).attr('class');
  680.  
  681. // reset the active class on all the buttons
  682. $('#filterOptions li').removeClass('active');
  683. // update the active state on our clicked button
  684. $(this).parent().addClass('active');
  685.  
  686. if(ourClass == 'all') {
  687. // show all our items
  688. $('#ourHolder').children('div.item').show();
  689. }
  690. else {
  691. // hide all elements that don't share ourClass
  692. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  693. // show all elements that do share ourClass
  694. $('#ourHolder').children('div.' + ourClass).show();
  695. }
  696. return false;
  697. });
  698. });
  699. </script>
  700.  
  701.  
  702.  
  703.  
  704. </body>
  705. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!