"GCoder Collapse "
Bootstrap 3.1.0 Snippet by Glgcoder

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <div class="container "> <div class="col-sm-12"> <div class="row"> <div class="col-sm-12"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseOne"> <font size="10 " , face="garamond " color="green "> <h1 style="text-align:center">ABOUT ME</h1></font> </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> <div class="panel panel-default"> <div class="panel-body"> <h1 style="text-align:center">Who Am I?</h1> </div> </div> <p class="rad" style="text-align: center; text-indent: 0in; background-color: #ff1493;"><big style="color: white;"><big>Getting to know me</big></big> </p> <h2> <strong><center>Let's start with my name Lillie Leona Glasgo</center> </strong> </h2> <p>I believe in myself and in others. I have always been creative, I write poetry, I quilt, I like bike riding and creating and developing web sites and web applications. I have decided to learn as much as I can because I want to help make the world a better place. </p> <p>I created debtxit.com because I was inspired by my sister Kathy. While creating a budget and a debt elimination plan helping her pay off a bit over seventeen dollars in credit card debt, I decide to take it to another level and help others. I first wrote a book about the matter so that those who do who have no interest in using a computer could benefit too (not yet published – need an agent and publisher). I started the web page but could only get so far with template. It took a minute but I learned I needed to create a customer database, customer profile and a user account and an app to capture my ideal to help folk get out of debt. Needless to say I did not have a clue how to do this. </p> <p>In my quest to fulfill my goal, I was told I needed a web designer, a web architect, a web developer and lots of money. I went to visit a friend Vonita to help me with my resume who introduced me to Rene who introduce me to Coleen who introduced me to the Stride Center where I learned basic HTML and CSS and Security+. I am certified CIW Site Development Associate and have a Comptia Security + certification. I continue my journey to learn several computer languages as well as become a certified Cybersecurity Analyst. </p> <p>I am working on the app so stay toned! </p> <p>#whocoulddoitbetter </p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseTwo"> <font size="10 " , face="garamond " color="green "><h1 style="text-align:center">MY RESUME</h1></font> </a> </div> <div id="collapseTwo" class="accordion-body collapse in"> <div class="accordion-inner"> <div class="panel panel-default"> <div class="panel-body"> <center> <h1>Nice To Meet You</h1></center> </div> </div> <p class="rad" style="text-align: center; text-indent: 0in; background-color: #ff1493;" align="center"><big style="color: white;"><big>Professional Application Developer</big></big> </p> <h2><strong><center>Skils I can rely on</center></strong></h2> <h4><Strong>2015 - Present Student at the Stride Center: </Strong> Certified Web Developer</h4> <ul> <li>Front-end web development: HTML, CSS, JavaScript</li> <br/> <li>jQuery</li> <br/> <li>Back-end web development: </li> <br/> <li>Experienced with HTML, CSS SCSS - Web page development using images, hyperlinks, tables, forms and frames etc</li> <br/> <li>Familiar with ruby and ruby on rails</li> <br/> <li>Able to work remotely and independently</li> <br/> <li>Manual code writing, graphical user interface (GUI) authoring tools, and XHTML code validation</li> <br/> <li>Web page content, and fundamental Web design concepts, Cascading Style Sheets (CSS) for formatting</li> <br/> <li>Familiar with Ruby, JavaScript, PHP, HTML CSS and SCSS, GitHub, Cloud9 BitBucket</li> <br/> <li>Familiar to WordPress</li> <br/> <li>CGI and connecting Web pages to databases</li> <br/> <li>Internet marketing and search engine optimization (SEO) </li> <br/> <li>Web page content, and fundamental Web design concepts, Cascading Style Sheets (CSS) for formatting </li> <br/> <li>Development of Web sites as managed projects</li> <br/> <li>Application Programming Interfaces (APIs)</li> <br/> </ul> <h4><strong>Administrative Skills</strong></h4> <ul> <li>7 years as a Legal Secretary/Paralegal </li> <br/> <li>Proficient in Microsoft Office Suite Outlook, WordPerfect and Adobe Photoshop</li> <br/> <li>Effective communicator, strong interpersonal skills - motivated, driven and results oriented</li> <br/> <li>Excellent presentation, negotiation, and closing skills</li> <br/> </ul <h5> <Strong>2015 Meeting Of The Mines Hackathon: </Strong> Grand Prize winners</h5> <ul>As the project manager, I utilize my administrative and management skills to direct our team to the finals. Winning over a group of students from UC Berkeley was the fuel we all needed to keep it pushing. </ul> <br/> <h2><strong><center>Education</center></strong></h2> <ul> <li> Free Code Camp "Full Stack Web Development Certification". stydied "Computer Software Engineering". 2015 - Present: <a href="http://www.stridecenter.org">The Stride Center</a></li> <li> 1977 San Francisco State University</li> <li> San Francisco city College</li> <li> Barclays Career College - Paralegal Certificate</li> <li> Fred Sands Real Estate School - Real Estate Broker</li> </ul> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseThree"> <font size="10 " , face="garamond " color="green "><h1><center>PORTFOLIO</center></h1></font> </a> </div> <div id="collapseThree" class="accordion-body collapse in"> <div class="accordion-inner"> <div class="panel panel-default"> <div class="panel-body"> <center> <h1>My Journey</h1></center> </div> </div> <div> <p class="rad" style="text-align: center; text-indent: 0in; background-color: #ff1493;" align="center"><big style="color: white;"><big> Full-Stack "goal" Web Developer</big></big> </p> </div> <br> <div class="container"> <div class="row"> <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12"> <!--<h1 class="gallery-title">My Projects</h1>--> </div> <div align="center"> <button class="btn btn-default filter-button" data-filter="all">All</button> <button class="btn btn-default filter-button" data-filter="logos">Logos</button> <button class="btn btn-default filter-button" data-filter="sprinkle">Pure Code</button> <button class="btn btn-default filter-button" data-filter="spray">Project Manager</button> <button class="btn btn-default filter-button" data-filter="irrigation">Web Master</button> <button class="btn btn-default filter-button" data-filter="irrigation">Contents</button> </div> <br/> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="pics/debtxit.JPG" class="img-responsive" style="width:265px;height:265px;"> <div class="title">Project Title</div> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"> <img src="pics/jbm.jpg" class="img-responsive" style="width:265px;height:265px;"> <div class="title">Project Title</div> </div> <div class="col-md-3 col-sm-3 col-xs-12"> </div> <!--- END COL --> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="pics/MOTM.png" class="img-responsive" style="width:265px;height:265px;"> <div class="title">Meeting Of The Minds 2015</div> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 logos"> <img src="pics/cwflogo.PNG" class="img-responsive" style="width:265px;height:265px;"> <div class="title">Courageous Women Foundation</div> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray "> <img src="pics/WMTlogo.png " style="width:365px;height:365px" div class="img-responsive "> <div class="title ">Wanda M Thomas</div> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation "> <img src="pics/stride.png" class="img-responsive " style="width:365px;height:365px"> <div class="title ">The Stride Center</div> </div> <!-- save<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation "> <img src="pics/stride.png" class="img-responsive "> <div class="title ">Project Title</div> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe "> <img src="http://fakeimg.pl/365x365/ " class="img-responsive "> <div class="title ">Project Title</div> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray "> <img src="http://fakeimg.pl/365x365/ " class="img-responsive "> <div class="title ">Project Title</div> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle "> <img src="http://fakeimg.pl/365x365/ " class="img-responsive "> <div class="title ">Project Title</div> </div>--> </div> </div> </div> </div> </div> <ddiv class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseFour"> <font size="10 " , face="garamond " color="green "><h1><center>LET'S CHAT</center></h1></font> </a> </div> <div id="collapseFour" class="accordion-body collapse in"> <div class="accordion-inner"> <div class="panel panel-default "> <div class="panel-body "> <center> <h1>Freedom of Speech</h1></center> </div> </div> <div> <p class="rad " style="text-align: center; text-indent: 0in; background-color: #ff1493; " align="center ">Message In A Bottle </p> </div> </div> <div class="container "> <div class="chat "> <div class="row text-center "> <div class="col-sm-3 col-xs-6 first-box "> <span class="glyphicon glyphicon-earphone "></span> <h3>Phone</h3> <p>310 <!--smaller dot &middot-->● 926 ● 8628</p> <br> </div> <div class="col-sm-3 col-xs-6 second-box "> <span class="glyphicon glyphicon-home "></span> <h3>Location</h3> <p>Antioch CA</p> <br> </div> <div class="col-sm-3 col-xs-6 third-box "> <span class="glyphicon glyphicon-send "></span> <h3>E-mail</h3> <a href="mailto:llglsgo@gmail.com ">llglasgo@gmail.com</a> <br> </div> <div class="col-sm-3 col-xs-6 fourth-box "> <span class="glyphicon glyphicon-leaf"></span> <h3>Web</h3> <p>www.gcoder.me</p> <br> </div> </div> </div> <br> </div> </div> </div> </div> </div> </div> </div> </div>
.hr{margin:5px 0;} .accordion-group{margin-bottom:10px;border-radius:0;} .accordion-toggle{ background:rgb(248, 251, 252); } .accordion-toggle:hover{ text-decoration: none; } .accordion-heading .accordion-toggle { display: block; padding: 8px 15px; } .selectStyle{ width:46%; float: left; margin-right: 8%; } .accordion-group{ margin-bottom:20px; }
// accordion pluse minus goes here jQuery('.accordion-toggle').click(function(){ var has = jQuery(this); if(has.hasClass('collapsed')){ jQuery(this).find('i').removeClass('fa-plus'); jQuery(this).find('i').addClass('fa-minus'); } else{ jQuery(this).find('i').removeClass('fa-minus'); jQuery(this).find('i').addClass('fa-plus'); } })

Related: See More


Questions / Comments: