0

Hi there not very proficient in coding. I have #content fading out and in when .background-button clicked. How do I get text on button to display hide content / show content?

Also I need to fade out another two divs (.button-next, .button-prev) when hide content clicked?

Anyone that can help?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<script type="text/javascript">

var openingdelay = 200; // Delay before fade in initiated (default is 200)
var closingdelay = 100; // Delay before fade out initiated (default is 100)
var openingspeed = 25; // Speed of fade in (default is 25)
var closingspeed = 15; // Speed of fade out (default is 15)

function Show(elementid) {
    ele = document.getElementById(elementid);
        if(ele.style.display == 'none') {
            ele.style.opacity = 0;
            ele.style.filter = 'alpha(opacity=0)';
            ele.style.display = '';
            valueop = 1;
            setTimeout("fadeIn()", openingdelay);
        } 
        else {
            valueop = 9;
            setTimeout("fadeOut()", closingdelay);
        }
}
        function fadeOut() {
        if(valueop < 1) {
        ele.style.display = 'none';
        return false;
        }
            ele.style.opacity = valueop/10;
            ele.style.filter = 'alpha(opacity='+(valueop*10)+')';
            valueop = valueop - 1;
            setTimeout("fadeOut()", closingspeed);
        }
        function fadeIn() {
        if(valueop > 10) {
        return false;
        }
            ele.style.opacity = valueop/10;
            ele.style.filter = 'alpha(opacity='+(valueop*10)+')';
            valueop = valueop + 1;
            setTimeout("fadeIn()", openingspeed);
        } 


</script>
<style type="text/css">
.layer1 {
margin: 0;
padding: 0;
width: 500px;
}

.background-button {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
float:right;
}
#content {
padding: 5px 10px;
background-color:#000;
float:left; width:400px; height:600px; color:#FFF
}

</style>
</head>

<body>

<div id="content" >Hello! This will remain hidden until the link is clicked.</div>

<div class="background-button"><a href="#" onClick="Show('content'); return false;">Click Me To Reveal More</a></div>

<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:100px; height:50px; width:100px;" id="button-next">next</div>
<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:200px; height:50px; width:100px;" id="button-prev">prev</div>


</body>
</html>
2
  • 3
    IS it necessary to accomplish using java script because you can easily do that using jQuery....... or can you make a fiddle for demo.
    – w3uiguru
    Dec 11, 2012 at 11:44
  • Provide the HTML and CSS also in your question.. so we can see the structure and figure out what we have to serve you.
    – w3uiguru
    Dec 11, 2012 at 11:48

2 Answers 2

0

I modified your html to put and ID to the link: #show_more

HTML:

<div id="content" >Hello! This will remain hidden until the link is clicked.</div>

<div class="background-button"><a id="show_more" href="#">Click Me To Reveal More</a></div>

<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:100px; height:50px; width:100px;" id="button-next">next</div>
<div style="background-color:#000; color:#FFF; position:absolute; right:0px; top:200px; height:50px; width:100px;" id="button-prev">prev</div>​

jQuery:

$('#content, #button-next, #button-prev').hide();
$('#show_more').click(function(e) {
    e.preventDefault(); // disable default <a> behavior

    if ($('#content').is(':visible')) {
        $('#show_more').text('Show Content');
    } else {
        $('#show_more').text('Hide Content');
    }

    $('#content, #button-next, #button-prev').fadeToggle();
});

The first line simply hides the content and buttons. You should hide them via CSS or inline styles and remove this line of code.

edit: jsFiddle

0
0

I would add the event listener using registration instead of an inline event handler:

var button = document.querySelector('.background-button');
button.addEventListener("click", function(){
    Show('content', this.children[0]);
    return false;
});

The function Show would correspondingly have to be modified to:

function Show(elementid, link) {
    ele = document.getElementById(elementid);
    if (ele.style.display == 'none') {
        ele.style.opacity = 0;
        ele.style.filter = 'alpha(opacity=0)';
        ele.style.display = '';
        valueop = 1;
        setTimeout("fadeIn()", openingdelay);
    }
    else {
        valueop = 9;
        setTimeout("fadeOut()", closingdelay);
    }
    if(link.getAttribute('data-hidden') == "hidden"){
        link.innerHTML = "Click Me To Hide Stuff";
        link.removeAttribute("data-hidden");
    }else{
        link.innerHTML = "Click Me To Reveal More";
        link.setAttribute("data-hidden", "hidden");
    }
}

Here are the results: http://jsfiddle.net/p3Qzk/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.