SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Show Hide Issue

  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show Hide Issue

    Hello,

    I have a simple show hide script that when clicking on a H2 tag opens a DIV. When the user clicks again on the show hide related H2 it doesn't pull the content back in or hide it.

    I know there must be a simple way to edit this script so the h2 would show and hide elements by clicking on it. I've been banging my head against the wall with this, any help would be super appreciated!

    $(document).ready(function() {
    $("#resume").hide();
    });

    doShowHide = function(idstr) {
    $("div.showhide:visible").each(function () {
    if (this.id != idstr) $(this).hide("slow");
    });
    $("div.showhide#"+idstr).show("slow");
    }


    <h1 onclick="javascript:doShowHide('resume');">
    resume
    </h1>
    <div class="showhide" id="resume">
    <h2>
    CONTENT</h2>
    </div>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,195
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Give this a try

    Code JavaScript:
    $(document).ready(function(){
        $(".showhide").hide();
    });
     
    doShowHide = function(idstr){
        var $ID = $("div#"+idstr); 
        var $e  = $("div.showhide:visible");
     
        $.each($e, function(i,v){
            if ($(v).attr("id") != idstr) $(v).hide("slow");
        });
     
        $ID.toggle("slow");
    }

  3. #3
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know how to do it using JQuery, but this is how I do it using plain vanilla javascript. Hopefully it will help fix your problem.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
     
    ul {
    list-style-type: none}
     
    .more_content {
    margin: 10px 0px 0px 50px;
    padding: 5px 5px 5px 5px;
    width: 200px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
    display: none}
     
    </style>
    <script type="text/javascript">
     
    function showHideMore(link_id,elemId) {
        var linkObj = document.getElementById(link_id);
        var contObj = document.getElementById(elemId);
        var status = (contObj.style.display == 'block')? 'none' : 'block';
        //display/hide the more content for this elemId
        contObj.style.display=status;
        //change the link innerHTML
        linkObj.innerHTML = (status == 'block')? 'Show less' : 'Show more';
    }
     
    </script>
     
    </head>
    <body>
        <ul>
            <li>
               <div>
                   <a id="m1_link" href="#" onclick="showHideMore(this.id,'m1_cont'); return false;">Show more</a>
                   <div id="m1_cont" class="more_content">More 1 content</div>
               </div>
            </li>
            <li>
               <div>
                   <a id="m2_link"  href="#" onclick="showHideMore(this.id,'m2_cont'); return false">Show more</a>
                   <div id="m2_cont" class="more_content">More 2 content</div>
               </div>
            </li>
            <li>
               <div>
                   <a id="m3_link"  href="#" onclick="showHideMore(this.id,'m3_cont'); return false;">Show more</a>
                   <div id="m3_cont" class="more_content">More 3 content</div>
               </div>
            </li>
            <li>
                <div>
                   <a id="m4_link"  href="#" onclick="showHideMore(this.id,'m4_cont'); return false;">Show more</a>
                   <div id="m4_cont" class="more_content">More 4 content</div>
               </div>
            </li>
        </ul>
    </body>
    </html>


Bookmarks

Posting Permissions

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