Home/ Questions/Q 8652991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T14:26:06+00:00

Thanks for taking the time to read this post. Hope those who are asking

  • 0

Thanks for taking the time to read this post. Hope those who are asking the same question would get their answers too.

I am working on a single page website divided into 8 big divs, so that when you click on the menu bar, it will take you to one of the divs (or “pages).

On one of the divs (or pages), which is the intro section of my website, I’m trying to introduce this effect :http://jsfiddle.net/unbornink/LUKGt/

I have a row of buttons, e.g. “Who we are”, “What we do”, “How we think”….and I have a div under this row of buttons, where different texts are shown when you click on different buttons.

I tried to follow all the steps suggested by http://jsfiddle.net/unbornink/LUKGt/. Unfortunately, I cannot get the button to fire.

Here is the code of my work:

<head>    
<link href="textContainer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">   <------I put these in CSS style sheet.
.textWord_about{
position: absolute;
font-family: Calibri;
font-size: 14px;
top: 22px;
left: 29px;
width: 650px;
height: 390px;
text-align: left;
background-image: url(images/slider_bkgd.png);
background-repeat: repeat;
}
.textContainer_about {
position: absolute;
top: 870px;
left: 234px;
width: 727px;
height: 452px;
z-index: 20;
color: rgb(4,4,4);
display: block;
background-image: url(images/slider_bkgd.png);
background-repeat: repeat;
overflow: visible;
}
.links {
font-family: Calibri;
font-size: 14px;
}
</style>
</head>



<body>
<div id="menu_about">
<a class="link" href="#about" data-link="first">&nbsp;&nbsp; Why We Exist</a> &#8226; <a class="link" href="#about" data-link="second">Who We Are</a> &#8226;
<a class="link" href="#about" data-link="third">What We Do</a> &#8226; 
<a class="link" href="#about" data-link="fourth">How We Think</a> &#8226; 
<a class="link" href="#about" data-link="fifth">Where We Are Going</a>
</div>
<div id="pages_about" class="textContainer_about">
<div class="textWord_about" data-link="first">
 <p>ffffffffffffffffffffffffffff</p>
 </div>
<div class="textWord_about" data-link="second">
  <p>ffffffffffffffffffffffffffff</p>
</div>
<div class="textWord_about" data-link="third">
  <p>ffffffffffffffffffffffffffff</p>
</div>
<div class="textWord_about" data-link="fourth">
  <p>ffffffffffffffffffffffffffff</p>
  <p>ffffffffffffffffffffffffffff</p>
  <p>ffffffffffffffffffffffffffff</p>
  <p>ffffffffffffffffffffffffffff</p>
  <p>ffffffffffffffffffffffffffff</p>
</div>
<div class="textWord_about" data-link="fifth">
  <p>ffffffffffffffffffffffffffff</p>
</div>
</div>


<script type="text/javascript">
$('.textword_about').hide();

$('.link').click(function() {
    $('.textword_about').hide();
    $('.textword_about[data-link=' + $(this).data('link') + ']').fadeIn({
        width: '200px'
    }, 300);
});​
</script>

Please propose a solution! Much APPRECIATED!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is typo in your selector. Change textword_about to textWord_about [Note the letter W in textWord_about]

    Fixed Code: http://jsfiddle.net/LUKGt/5/ (without your stylesheets)

    Code:

    $('.textWord_about').hide();

$('.link').click(function() {
    $('.textWord_about').hide();
    $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
        width: '200px'
    }, 300);
});​
    • 0