Skocz do zawartości

Zmiana tekstu informacyjnego po kliknięciu w button jQuery


Maniek xD
 Udostępnij

Rekomendowane odpowiedzi

Witajcie. Napisałem mały skrypcik przy pomocy jquery css i htmla. Nie wiem jak zrobić aby po kliknięciu w przycisk "dla kandydatów" zamiast więcej pokazał się tekst mniej na buttonie w prawym dolnym rogu. Teraz jest tak, że muszę kliknąć w "więcej" i się zmieni na mniej a mi zależy żeby to się zmieniło niezależnie od tego gdzie się kliknie. Poniżej daje link do strony ze skryptem.
>>Strona<<

Spoiler

<!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" lang="pl-PL">
<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- dodanie jQuery do dokumentu -->
<style>

#menu {
			width: 200px ;
			
		}

ul	{
			width: 200px;
			height: 50px;
			margin-right: 100px;
			margin-left: 5px;
			text-align: center;
			color:white;
			background-color: #6C6C6C;
			display:table-cell;
			vertical-align:middle;
			margin:0;padding:0;
			
		}
ul:hover {
			background-color: #919191;
}
li	{
			width: 200px;
			height: 30px;
			color:white;
			background-color: #0BBDFF;
			text-align: center;
			border-top:3px solid #fff;
			line-height: 30px;
			list-style: none !important; 
			
		}
li:hover {
			background-color: #8FD9FF;
}
a { 
			text-decoration: none;
			color:white;

}
a:hover { 
			text-decoration: none;
			color:white;			
} 
#test {
			font-size:12px;
			margin-left:120px;
}
</style>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">

    $(document).ready(
    function()
    {
    $("ul").click(
    function()
    {
    $("li").toggle();
    });
    });
	
	$(document).ready(
	function()
	{
	$("#test").click(
	function()
	{
	$("li").toggle();
	}).toggle(function() { $(this).text('schowaj'); }, function() { $(this).text("więcej"); });
	});
	
</script>

</head>
<body>
<div id="menu">
<ul><a href="#">DLA KANDYDATÓW</a>
<div id="test">więcej</div>
</ul>
<li style="display: none;"><a href="#">test1</a></li>
<li style="display: none;"><a href="#">test1</a></li>
<li style="display: none;"><a href="#">test1</a></li>

</div>
</body>
</html>

 

Chodzi głównie o to jak powiązać ze sobą id żeby po kliknięciu 1 zmienił się tez 2
 

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

A jeszcze lepiej to można zrobić w ten sposób:

$(document).ready(function(){
  $('ul').click(function(){
    var $info = $(this).children('#test');
    $('li').toggle(
      function(){
        $info.text('schowaj');
      },
      function(){
        $info.text('więcej');
      }
    );
  });
});
Odnośnik do komentarza
Udostępnij na innych stronach

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij

×