Webboard

Pełna wersja: Po kliknięciu na obrazek pojawia się treść
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
Witam was jak mozna zrobić menu obrazkowe tzn klikam na obrazek i wyjeżdża mi pod nim tekst. Chciałbym aby obrazek był normalnie wyświetlany i po kliknięciu na inny obrazek tekst z poprzedniego znikał i zostawał zastępowany nowym. Przykład na zdj. [Obrazek: Bez_nazwy-1.jpg]
HTML:
Kod:
<div id="pierwszy">1 obrazek</div>
<div id="drugi">2 obrazek</div>
<div id="trzeci">3 obrazek</div>

<br style="clear: both;">

<div id="pierwszy_tekst">tekst 1</div>
<div id="drugi_tekst">tekst 2</div>
<div id="trzeci_tekst">tekst 3</div>

CSS:
Kod:
#pierwszy_tekst, #drugi_tekst, #trzeci_tekst {
display: none;
}

JS:
Kod:
<script>
$(document).ready(function() {
$('#pierwszy, #drugi, #trzeci').click(function() {
hideText()

var checkId = $(this).attr('id')
console.log(checkId + '_tekst')
$('#' + checkId + '_tekst').slideDown(500)
})

function hideText() {
$('#pierwszy_tekst, #drugi_tekst, #trzeci_tekst').css('display','none')
}
});
</script>
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?
Demo tutaj: 
demo
Usuń klasę hidden-panel z tych divów:

Kod PHP:
<div id="nowe_wnetrza_panel" class="bg-2 container text-center hidden-panel"
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')
}
})
});