Show Hide Issue

JavaScript
1

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

Give this a try

$(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

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.

 
<!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>