Results 1 to 8 of 8
  1. #1
    Join Date
    Apr 2012
    Location
    Detroit
    Posts
    23

    Jquery: Automatically Hidden Div, Toggle to Show

    Hello everyone,

    I am messing around with this Jquery script trying to figure something out, it is a script used to toggle hide or show of a div. Its pretty simple, and working out so far, but I am trying to figure out just how to make the div automatically hidden, then use the toggle button to show the contents. Because all the script examples, and tutorials that I find on this, only explains how to hide the div contents by toggling with a button. After which you can then show the contents again by pressing the button again, but no matter what script, or method I use, it always ends up starting out being visible, and then you toggle it to hide it.

    Which is backwards from what I am looking for. I would like to be able to have the div hidden as soon as the page is loaded, and then be able to click the button/link only if one would like to see the contents.

    Im using it for a div on one of my open Source XHTML 1.0 strict templates, that I am messing around on, and will most likely upload for free use under the GPL licensing to one or two of the many free web template websites, to build up a portfolio.

    Anyway the contents of the div I want to be automatically hidden, is text and some logo's of various software that I used to make the web page. So I want the link/button to only be clicked if one would like to see what I used to make the page, and some information about it, etc. So since its not necessarily important to the main structure of the page, I want it to be automatically hidden, that way it doesn't even have to be looked at, and then if someone who uses my template can also use the Jquery code as well to show or hide content they add to the page. So it will be good for many things..


    Right now, this is the code structure I have so far. I need to figure out what I can add to automatically hide the div, like I explained, or I guess go with a whole new code to achieve what I am looking to do. Either would be fine.. I just wish for it to be as minimal as possible.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    function toggleDiv(divId) {
    $("#"+divId).toggle();
    }
    </script>

    <a href="javascript:toggleDiv('myContent');">Toggle Button</a>
    <div id="myContent">
    The content in this div will hide and show (toggle) when the toggle is pressed. </div>

    So anyway someone can show me what I should add or change to achieve this? I just need to make sure its automatically hidden when the page is loaded, then the link/button will show the contents of the div. Simple as that, Ill take care of the rest.
    But like I said, it must stay Minimal as possible, and IT MUST VALIDATE!!! This is important! My XHTML 1.0 Strict must continue to validate after this, so please no hack/shortcuts.. Also preferably something that most all browsers are compatible with, and not just the newest of all.


    Thanks a bunch folks!
    Take care.

  2. #2
    Join Date
    Mar 2009
    Location
    New Mexico - USA
    Posts
    224
    Simple just add the following to the CSS for the #myContent div
    display: none;

  3. #3
    Join Date
    Apr 2012
    Location
    Detroit
    Posts
    23
    ha, simple enough! Thanks a bunch!

    Wish you the best buddy. I appreciate the help a lot!
    The most stumping situations always seem to have the simplest overlooked solutions.

    Thanks again.

  4. #4
    Join Date
    Apr 2012
    Location
    Detroit
    Posts
    23
    Oh maybe I should mention... I cant seem to get it to work correctly in an external CSS stylesheet for some reason. But it does work by just typeing "syle="display: none;" inside of the Div tag..

    But like I said, for some reason it isnt working in the external CSS for my page..

    i wonder why that is?

    Maybe I am using CSS incorrectly for the ID attribute, as compared to "class"?

  5. #5
    Join Date
    Mar 2009
    Location
    New Mexico - USA
    Posts
    224
    What does your CSS look like?

  6. #6
    Join Date
    Sep 2007
    Posts
    357
    You may want to start with jQuery 1.7.2 instead of 1.4..

  7. #7
    Join Date
    Apr 2012
    Location
    Detroit
    Posts
    23
    My Css doesnt look like anything for that element yet.. It just has

    .myContent
    {
    display: none;
    }
    I planned on adding the finishing touches after I made sure it worked.

    But yeah I plan to use the most recent Jquery library.
    That sample code was just to show the concept since its an external link. I am going to actually use the local jQuery file on my computer, and not a link to an external source.


    So do I not use the period in front of the myContent for id attributes, and only use it for Classes?

    Thanks for the help so far folks.



    EDIT:

    My bad... I use # for ID attributes dont I?

    simple mistake... My bad guys..
    I should be all set now.
    Thanks for everything!

  8. #8
    Join Date
    Apr 2012
    Location
    Detroit
    Posts
    23
    Hello everyone,

    I wanted to ask another semi similar question. I decieded not to start a new thread to not cramp up the sub forum, because this topic is quite similar anyway.

    I would like to add an "Show More" toggle to the content of a webpage.

    You know how it shows maybe the first two paragraphs or something, like in the description on amazon, or on the home page of wordpress sites?

    I would like to show just some of the content instead of taking up a whole entire page of mostly content in a collumn. It would be nice to make a specific size div or something that would show that much content, and once it gets past that part, it automatically hides the rest of the content, showing only a "Show More" toggle, to show the rest of the content when clicked.

    Also it would be really neat to start making the last bit of content that is shown before the "show more" start going transparent. Like the description on Amazon.

    What would be the best way to go about doing this would you think?

    I am also going to look at amazon's source as well to see if I can get any Ideas. but I thought I should also ask what you all thought was best as well.

    Should I just use XHTML? or should I be using Javascript or Coffeescript or something?

    Thanks folks. Id appreciate some help!



    I see amazon uses this for their style for the content div.


    overflow: hidden;
    z-index: 1;
    height: 200px;
    display block;

    They do it right in the html by adding (style="") instead of an external CSS

    they also use
    display: none;
    padding-top: 3px;

    for a div called "collapse"
    Last edited by insomnia24/7; 05-13-2012 at 03:47 PM.

Similar Threads

  1. Replies: 9
    Last Post: 01-16-2012, 05:07 AM
  2. body onload = hide div, but div shows before being hidden - ???
    By JavaDziner in forum Web Design and Content
    Replies: 7
    Last Post: 08-30-2010, 11:24 AM
  3. Toggle (Show / Hide) multiple dynamic IDs
    By Nervosa in forum Web Design and Content
    Replies: 2
    Last Post: 04-06-2010, 02:10 PM
  4. jquery vs ie7, scrollable div layer
    By streetmedia in forum Web Design and Content
    Replies: 1
    Last Post: 07-02-2009, 02:39 PM
  5. Replies: 1
    Last Post: 09-11-2005, 08:08 PM

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
  •