Home/ Questions/Q 8968487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:27:40+00:00

Hi there not very proficient in coding. I have #content fading out and in

  • 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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