Możesz zobaczyć bo z obrazkami nie działa a z tekstem co ty dałeś w przykładzie działało
Kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>KLAART</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/style-mobile.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/menu.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<?php include("./templates/menu.php"); ?>
<div class="container-fluid text-center">
<div class="row">
<div id="pierwszy">
<div id="nowe_wnetrza" class="col-sm-4 img-height img-projekty-menu img-text-projekty-menu" style="background: url(../images/box/img-8.jpg) no-repeat center center;">
<div class="img-container">
<h1>Nowe wnętrza</h1></br>
<p>w centrum Warszawy</p>
</div>
</div>
</div>
<div id="drugi">
<div id="nowe_wnetrza2" class="col-sm-4 img-height img-projekty-menu img-text-projekty-menu" style="background: url(../images/box/img-8.jpg) no-repeat center center;">
<div class="img-container">
<h1>Nowe wnętrza</h1></br>
<p>w centrum Warszawy</p>
</div>
</div>
</div>
<div id="trzeci">
<div id="nowe_wnetrza2" class="col-sm-4 img-height img-projekty-menu img-text-projekty-menu" style="background: url(../images/box/img-8.jpg) no-repeat center center;">
<div class="img-container">
<h1>Nowe wnętrza</h1></br>
<p>w centrum Warszawy</p>
</div>
</div>
</div>
<br style="clear: both;">
<div id="pierwszy_tekst">
<div id="nowe_wnetrza_panel" class="bg-2 container text-center hidden-panel">
</br></br>
<div class="row">
<div class="col-sm-12">
<h4>Mieszkanie na wynajem</h4>
<h3>Najistotniejszym elementem podczas tego projektu było przeznaczenie mieszkania do wynajmu.</h3>
<p>Nieduży budżet nie przeszkodził w uzyskaniu fajnego efektu. Zastosowano trwałe, choć niedrogie materiały. Mieszkanie jest niewielkie, ale bardzo funkcjonalne, idealne dla pary. Jasne ściany, podłoga i meble sprawiają wrażenie większej przestrzeni. Ponadto cały remont od stanu deweloperskiego do tego widocznego na zdjęciach udało się przeprowadzićw ciągu miesiąca.</p></br>
</div>
</div>
</br></br>
</div>
</div>
<div id="drugi_tekst">
<div id="nowe_wnetrza_panel" class="bg-2 container text-center hidden-panel">
</br></br>
<div class="row">
<div class="col-sm-12">
<h4>Mieszkanie na wynajem</h4>
<h3>Najistotniejszym elementem podczas tego projektu było przeznaczenie mieszkania do wynajmu.</h3>
<p>Nieduży budżet nie przeszkodził w uzyskaniu fajnego efektu. Zastosowano trwałe, choć niedrogie materiały. Mieszkanie jest niewielkie, ale bardzo funkcjonalne, idealne dla pary. Jasne ściany, podłoga i meble sprawiają wrażenie większej przestrzeni. Ponadto cały remont od stanu deweloperskiego do tego widocznego na zdjęciach udało się przeprowadzićw ciągu miesiąca.</p></br>
</div>
</div>
</br></br>
</div>
</div>
<div id="trzeci_tekst">
<div id="nowe_wnetrza_panel" class="bg-2 container text-center hidden-panel">
</br></br>
<div class="row">
<div class="col-sm-12">
<h4>Mieszkanie na wynajem</h4>
<h3>Najistotniejszym elementem podczas tego projektu było przeznaczenie mieszkania do wynajmu.</h3>
<p>Nieduży budżet nie przeszkodził w uzyskaniu fajnego efektu. Zastosowano trwałe, choć niedrogie materiały. Mieszkanie jest niewielkie, ale bardzo funkcjonalne, idealne dla pary. Jasne ściany, podłoga i meble sprawiają wrażenie większej przestrzeni. Ponadto cały remont od stanu deweloperskiego do tego widocznego na zdjęciach udało się przeprowadzićw ciągu miesiąca.</p></br>
</div>
</div>
</br></br>
</div>
</div>
</div>
</div>
<?php include("./templates/footer.php"); ?>
<script src="js/scrollreveal.min.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>
Dwa razy dołączasz jQuery, usuń jedno. Możesz dać jakieś demo?
Ok działa. Miałbym jeszcze jedną małą prośbę mógłbyś dorobić warunek, że nie reaguje aktywny obrazek
http://szablony.freeware.info.pl/background.html na ponowne naciśnięcie (teraz się od nowa rozwija tekst na kliknięciu) oraz dodanie klasy do aktywnego obrazka ?
JS:
$(document).ready(function() {
$('#pierwszy, #drugi, #trzeci').click(function() {
var checkId = $(this).attr('id')
var correctDiv = $('#' + checkId + '_tekst')
if (correctDiv.css('display') != 'block') {
hideTextDeleteClass()
correctDiv.slideDown(500)
.addClass('active')
}
})
function hideTextDeleteClass() {
$('#pierwszy_tekst, #drugi_tekst, #trzeci_tekst').css('display','none')
.removeClass('active')
}
});
Mam prośbę chciałem prosić o małą przeróbkę. Skrypt dodaje klase active do bloczka który się wysuwa, a ja bym chciał żeby ta klasa active dodawała się do diva który powoduje wysunięcie się tego bloczka z tekstem.
$(document).ready(function() {
$('#pierwszy, #drugi, #trzeci').click(function() {
var $this = $(this)
var checkId = $this.attr('id')
var correctDiv = $('#' + checkId + '_tekst')
if (correctDiv.css('display') != 'block') {
$('#pierwszy_tekst, #drugi_tekst, #trzeci_tekst').css('display','none')
correctDiv.slideDown(500)
$this.addClass('active')
$('#pierwszy, #drugi, #trzeci').not($this).removeClass('active')
}
})
});