Member Avatar for chris evans

Hi Guys!

I'm building a site on html,javascript/jquery and css.
i have links on the left side of the page (home, contact etc) which clicked displays appropriate and content on the right side. its (20:80) ratio.

i have a javascript file that controls the display of the content:

$(document).ready(function() {

   $("#home").click(function() {
      $("#homepage").toggle(1000);

   });

   $("#about").click(function() {
      $("#about").toggle(1000);

   });

   $("#contacts").click(function() {
      $("#contacts").toggle(1000);

   });


});

Content is displayed and hidden with a click of a link. As it is right now, you can have more than one piece of content showing i.e. if i click on About then Contacts, i'll have both showing.

I had thought of using wild cards on selectors such any open content is hidden before displaying the clicked menu e.g.

$("#contacts").click(function() {
      $("#*").hide() //wildcard
      $("#contacts").toggle(1000);

       });

I'm not sure of the correct implementation of wild cards though. Anyone help me out please. Im new to javascript and jquery.

  • 3 Contributors
  • 5 Replies
  • 299 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Josh Connerty
Member Avatar for pritaeas

Don't you have a wrapper div with a specific class you can use?

Member Avatar for chris evans

I had used a class before but i wasn't sure how i would define functions for each specific selector. Kindly explain how that works.

Member Avatar for pritaeas

Can you show the outline of the html you're using if below isn't clear (untested).

<!-- your links -->
<a id="homepage" class="button">homepage</a>
<a id="about" class="button">about</a>
<a id="contacts" class="button">contacts</a>

<!-- your content div's -->
<div id="content-homepage" class="content"></div>
<div id="content-about" class="content"></div>
<div id="content-contacts" class="content"></div>

$("a.button").click(function() {
    $("div.content").hide();
    $("#content-" + $(this).attr("id")).toggle(1000);
});
Member Avatar for chris evans

Hi Pritaeas,

Thank you for the input.
The outline for the page is:

<html>
  <head>
    <title> Title </title>
    <link href="test.css" rel="stylesheet" type="text/css" />
  </head>
    <body>

    <!--menus on left side of page -->
    <div sidemenu> 
       <p>Home</p>
       <p>About</p>
       <p>Works</p>
           <p id="category-a" class="content">Category A</p> <!--sub item of works-->
           <p id="category-b" class="content">Catergory B</p> <!--sub item of works-->
       <p>Contacts</p>
    </div

    <div content> <!--content on right side of page-->
        <div id="content-homepage" class="content">
        </div>

        <div id="content-about" class="content">
        </div>

        <div id="content-works" class="content">
        </div>

        <div id="content-contacts" class="content">
        </div>
    </div>
    <!---javascript-->
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="code.js"></script>

    </body>
    </html>

I have gone through it and tested it as well as the js. I would like to point out one thing though - the "Works" link is a drop down menu that displays "Category A and B" subitems.

I checked out the javascript and adjusted to apply click function as follows:

$(document).ready(function() {
    $("#category-a").hide()
    $("#category-b").hide()
    $("div.content").hide();

$("div.content").click(function() {
    $("#content-" + $(this).attr("id")).toggle(1000);

    });
});

clicking doesnt seem to work though :(

Member Avatar for Josh Connerty

I'm not overly keen with using the "toggle()" function in this way. I'd advise using the "animate()" function. The reason being is that toggle doesn't communicate at which state the object is at present, it only does the oposite. So if it's displayed, it just hides it. If it's hidden it just displays it, it's a very simple function.

I'd be tempted to have the content elsewhere and populate the display area with the content from wherever you have it placed on your page. This way it avoids any unwanted content on your main display area...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.