www.webdeveloper.com
Results 1 to 1 of 1

Thread: jQuery .show() and .hide()

Threaded View

  1. #1
    Join Date
    Jun 2012
    Posts
    6

    Angry jQuery .show() and .hide()

    Edit:

    Oh about 2 seconds after I posted this I realized I didn't have quotations around uhm.. ANYTHING. Feel like such an airhead. But yea Its fixed


    -----------------------
    Hey guys, I'm running into some trouble using the .show() and .hide() functions. I have 3 divs I am using as "buttons" and 3 divs with content. Of the content divs I only want to show one at a time depending on which "button" div was clicked on. I figured I would keep it light using jquery and css.

    Here are the content divs:
    HTML Code:
    <div class="fluid content">
              <div id="bestsProject" class="fluid">
                <h3>Best Provision Co., Inc. Website</h3>
                <p><img src="images/portfolio/full/bests.jpg"  alt=""/></p>
                <p class="projectDescription">This web site was the first site I have ever created. A company located out of New Jersey contacted me, they were in deserate need to update their web site. After about four weeks of work, I finished this client-side website. It was written in xHTML, CSS3, and JavaScript using the jQuery library. No server-side code as this was specifically for client-side use only. I continue my work with the company as changes are needed, and I aspire to write more web applications for this website in the future.</p>
              </div>
              <div id="s4dProject" class="fluid">
                <h3>Studio 4 Designs Website</h3>
                <p><img src="images/portfolio/full/s4d.jpg"  alt=""/></p>
                <p class="projectDescription">This was a project I designed/developed my sophomore year for my Server-Side Web Development. It is a demo website for a website design company. It includes a newsletter, as well as a web application to manage files on the server as well as databases using mySQL and PHP. The entire site was validated HTML5, CSS3, JavaScript including the jQuery Library, and of course mySQL and PHP.</p>
              </div>
              <div id="mfdProject" class="fluid">
                <h3>Dawn's My Favorite Deli Website</h3>
                <p><img src="images/portfolio/full/dawnsdeli.jpg"  alt=""/></p>
                <p class="projectDescription">Dawn's My Favorite Deli is a very fun, and ongoing project. The owners contacted me and asked to design and develop them a web site for their newly purchased deli. The site is written in HTML5, CSS3, PHP, JavaScript, and MySQL. A cool thing that I implemented on this site is the specials page. The deli owners have a GoogleDrive account on which is a document with all of their daily specials. Every day, they update the specials document on the Google Drive and the changes are instantly, and automatically updated on the website's specials page.</p>
              </div>
    And here is the jQuery I have been trying to use, it just flat out does nothing. Not even the first two statements hide anything.
    Code:
    <script type="text/javascript">
    		  	$(document).ready(function(){
    				  $(#s4dProject).hide();
    				  $(#mfdProject).hide();
    				
    		  
    				$("#bestsButton").click(function () {
    				  $(#s4dProject).hide();
    				  $(#mfdProject).hide();
    				  $(#bestsProject).show();
    				});
    				$("#s4dButton").click(function () {
    				  $(#mfdProject).hide();
    				  $(#bestsProject).hide();
    				  $(#s4dProject).show();
    				});
    				$("#mfdButton").click(function () {
    				  $(#bestsProject).hide();
    				  $(#s4dProject).hide();
    				  $(#mfdProject).show();
    				});
    			});
    		</script>
    And yes, I do have the jQuery library properly linked to the page, top of the header.:
    Code:
    <head>
        <script type="text/javascript" src="_script/jquery-1.7.1.min.js"></script>
    Last edited by ondo915; 07-10-2013 at 07:06 PM. Reason: Fixed

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles