jQuery memo_02

CSS JavaScript jQuery design

index.html

---

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>クリックで表示</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>

<body>
<div id="read-more">もっと読む</div>
<div id="more-text">
TxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxitTxit
</div>

<script>

$(function(){
$('#read-more').click(function(){

$('#more-text').toggle();
});
});

</script>
</body>
</html>

 

CSS

-----


#read-more{
color: white;
width: 200px;
padding: 10px 0;
background-color: rgb(238, 81, 157);
text-align: center;
cursor: pointer;
}

#read-more:hover{
background-color: rgb(224, 112, 167);
}

#more-text{
display:none;
}