CODEWITHSUNDEEP
jqueryhtmlcssdom
Dawesign
Dawesign

Reputation: 753

Showing and hiding divs on click

I have a nav bar with 3 menu points. called "home" "bildformate" and "kontakt". On load the a div with the class "home" is displayed below the navbar, displaying text etc. The other 2 divs are hidden. When I click on "bildformate" I want the home div to disappear and the div with the class "formate" should be visible. Same goes for the div "kontakt". But lets focus on the "bildformate" div first. This is my code right now:

<script>
$(document).ready(function(){
    $('.bildformate').click(function() {
        // show and hide
        $('.home').hide();
        $('.formate').show();   
    });
});

So when i click "bildformate" it works for like a split of a second. You can see the "home" div becoming invisible and the "formate" div flahes for second. Then everything looks like before. Why?

CSS of the 3 divs:

.home {
margin: 0 auto;
margin-top: 30px;
width: 60%;
padding: 0px;
background-color:#ededed;
color: #787878;
border-radius: 5px;
}

.formate {
margin: 0 auto;
margin-top: 30px;
width: 60%;
padding: 0px;
background-color:#ededed;
color: #787878;
border-radius: 5px;
}

.kontakt {
margin: 0 auto;
margin-top: 30px;
width: 60%;
padding: 0px;
background-color:#ededed;
color: #787878;
border-radius: 5px;
}

.content {
margin: 40px;
padding: 20px;
}

HTML code:

<body> 
<nav class="nav-wrapper">
    <ul>
        <li><a href="bildformate.html">Home</a></li>              
        <li class="bildformate"><a href="">Bildformate</a></li>
        <li><a href="">Kontakt</a></li>
    </ul>
</nav>

<div class="home">
    <div class="content">
        <p>Willkommen</p>
    </div>
</div>

<div class="formate">
    <div class="content">
        <p>Bildformate</p>
    </div>
</div>

<div class="kontakt">
    <div class="content">
        <p>Kontakt</p>
    </div>
</div>

Upvotes: 0

Views: 89

Answers (2)

Muhammad Umer
Muhammad Umer

Reputation: 18097

Ok found the problem your links, <a.. tags have their href attribute set as '' which causes page to reload for you.

If you change them to <a href="#" ... instead then it wont reload. The reset/flash thing you speak of is the result of page reloading and thus bringing everything to original state.

For testing i just wrote this line 

$("a").attr("href", "#");

However you should manually go change all href attributes to # value.

Upvotes: 1

Persijn
Persijn

Reputation: 14990

Seems you have some trouble showing and hiding some divs.
Here is shown & hide example:

var toggle = false;
$('#press').click(function() { //Our button and on press
  if (toggle) { //check if its hidden
    $('.first').show();
    toggle = false;
  } else {
    $('.first').hide();
    toggle = true;
  }
});
.first {
  border: 2px solid red;
  background: pink;
}
.second {
  border: 2px solid blue;
  background: teal;
}
.third {
  border: 2px dotted green;
  background-color: lime;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="press">Show</button>
<div class="first">This is the first div</div>
<div class="second">Second div here</div>
<div class="third">etc</div>

If you want less code you can simply toggle it:

$('#press').click(function() {
  //when pressed
  $('.first').toggle(); // show and hide
});
.first {
  background-color: pink;
  border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="press">Toggle instead</button>
<div class="first">This is the first example</div>
<div class="second">Just a placeholder</div>

Upvotes: 0

Related Questions