Trying to get either one of two panels to slideToggle when button is pressed

Question

I'm trying to create a code that makes one of two panels slide down when a button is pressed. Here's my code:

http://jsfiddle.net/06szhymc/82/

   $(document).ready(function(){
    $("#imageslider").click(function(){
  rand = Math.floor(Math.random() * 2) + 1;
  then if(rand==1){
$("#panel").slideToggle("slow");
        }else{
$("#panel2").slideToggle("slow");
    });
});
       

<button id="imageslider">Press<button>
    <div id="panel"><div id="panel"><div class="paneltest" style="background-color:black; color:white; padding:20px;">

<h2>Paris</h2>

<p>Paris is in France</p>
<div id="div1" style="width:80px;height:80px;background-color:green;"></div>
<p>Standing on the Seine Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

</div> </div></div>
    
    <div id="panel2"><div id="panel2"><div id="paneltest" style="background-color:black; color:white; padding:20px;">

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

</div> </div></div>

I would also like to have the panels be invisible (display:none) before the button is pressed, so that one or the other appears.

I can't see what's wrong with my code. Any help would deb much appreciated.

Answer 1

You have mixed up many tags.

First your javascript closing of functions are not taken care properly. Try and use an IDE if you are a beginner to understand if you have any missing braces.

Second with your html, you have to understand how to enclose the elements in one another because, what you have there is something with two same id's and a button is not closed properly.

$(document).ready(function() {
  $("#imageslider").click(function() {
    rand = Math.floor(Math.random() * 2) + 1;
    if (rand == 1) {
      $("#panel").slideToggle("slow");
    } else {
      $("#panel2").slideToggle("slow");
    };
  })
});

<button id="imageslider">Press</button>
<div id="panel1">
  <div class="paneltest" style="background-color:black; color:white; padding:20px;">
    <h2>Paris</h2>
    <p>Paris is in France</p>
    <div id="div1" style="width:80px;height:80px;background-color:green;"></div>
    <p>Standing on the Seine Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </div>
</div>
<div id="panel2">
  <div id="paneltest" style="background-color:black; color:white; padding:20px;">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

For ensuring the div's are invisible at first, you can add

$(document).ready(function () {
    $("#panel1").hide();
    $("#panel2").hide();
 ..
 ..

Update Here is what you can do to get one toggle on another just on visibility

$(document).ready(function () {
    $("#panel1").hide();
    $("#panel2").hide();
    $("#imageslider").click(function () {
        if (!($('#panel1').is(':visible'))) {
            $("#panel1").slideDown("slow");
            $("#panel2").hide();
        } else if (!($('#panel2').is(':visible'))) {
            $("#panel2").slideDown("slow");
            $("#panel1").hide();
        }
    });
});