Witam, chcę na swojej stronie umieścić rozwijany przycisk, aby działał muszę dodać style. Próbowałem poprzez custom.less, utworzylem katalog less w katalogu templates/szablon , lecz nic to nie dało. Jak to zrobić ?
Poniżej kod poszczególnych plików.
style (css) :
h1 {
text-align: center;
color: #000000;
}
.content {
width: 550px;
margin: 0 auto;
}
.content h3 {
background: url(img/plus.png) no-repeat right center #99CCFF;
border: 1px solid #99CCFF;
color: #000000;
display: block;
margin: 0px 0 0 !important;
padding: 0.5em 1em;
}
.content p {
font-size: 1.2em;
line-height: 1.4em;
padding: 10px;
}
.content h3.active {
background: url(img/delete.png) no-repeat right center #AAAAAA;
}
.content h3:hover {
background-color: #CDCDCD;
color: #000000;
border: 1px solid #CDCDCD;
cursor: pointer;
}
.content div {
padding: 0px;
}
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="skrypt.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="skrypt.js"></script>
</head>
<body><center>
<div class="content">
<h3>CENNIK</h3>
<div>
<p style="border: 0px none; margin: 0px 0px 0px; padding: 0px; font-size: 13px; font-family: Helvetica,Arial,sans-serif; text-align: center;"></p>
<table style="border-collapse: collapse; background-color: #f1f1f1; width: 550px; height: 15px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellspacing="2" cellpadding="2">
<p>TEKST</>
plik js :
$(document).ready(function() {
$('.content>div').hide();
$('.content>h3').click(function() {
$(this).next().slideToggle('fast');
$(this).toggleClass('active');
});
});