Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery
Hey! I need help.. As you will see from my question I'm very new at this..
I'm making my first web page and I want to use jQuery for showing text on click..
I have lists of song titles and I want that lyrics show up on click on the title, in a box on the right side of a list.
I anyone could help me, I would be veeeryyyyy grateful!!
thanks!!!
Posted 28-Apr-13 10:31am
Comments
Zoltán Zörgő at 28-Apr-13 15:38pm
   
How grateful exactly? ;)
What have you tried, what is the problem you encountered?
Blendende! at 28-Apr-13 15:50pm
   
hehe buy you a beer/candy.. depends on your preferences :)
well, for a start Im not sure I am using the right jq.. I can make the lyrics show, but just on one title, I dont know how to apply that on every title...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<style>
div {
display: none;
 
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<button>Title1</button>
<button>Title2</button>
<button>Title3</button>
<button>Title4</button>
<button>Title5</button>
<button>Title6</button>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<script>
$( "button" ).click(function() {
$( "div" ).show( "fold", 1000 );
});
</script>
</body>
</html>

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You will probably need to refine it, but try this one:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<style>
div {
display: none;
 
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<button id="btn_title1">Title1</button>
<button id="btn_title2">Title2</button>
<button id="btn_title3">Title3</button>
<button>Title4</button>
<button>Title5</button>
<button>Title6</button>
<div class="lyr" id="lyr_title1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="lyr" id="lyr_title2">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="lyr" id="lyr_title3">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<script>
$( "button" ).click(function() {
var id = this.id.replace("btn_","lyr_");
$( ".lyr" ).hide();
$( "#"+id ).show( "fold", 1000 );
});
</script>
</body>
</html>
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 587
1 Sergey Alexandrovich Kryukov 479
2 Maciej Los 305
3 Mathew Soji 195
4 Richard MacCutchan 145
0 OriginalGriff 7,356
1 Sergey Alexandrovich Kryukov 6,712
2 DamithSL 5,461
3 Manas Bhardwaj 4,916
4 Maciej Los 4,475


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.1 | Last Updated 28 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100