Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

How to create a drop down panel?


  • Please log in to reply
12 replies to this topic

#1 PCDevil

PCDevil

  • Members
  • 40 posts
  • OFFLINE
  •  
  • Local time:09:55 AM

Posted 11 August 2011 - 07:16 AM

I'm making a website and I have one page which has quite a bit of information with different headings. I don't want all this to be displayed at once so I figured the best option would be to allow the user to click the heading and have the information drop down in a panel below.

For some reason I can't find any codes to do this apart from one and it only allows one drop down panel on the page, any more and they just don't work. So basically I want a code to allow the user to select which section they wish to see by clicking on a heading, I don't mind what coding it is (e.g. html, CSS, Javascript). I'd prefer not to download anything to make it work, but if I need to then fair enough. Does anyone have the best code to do this (or an exact name for this type of code so I can google it easier)?

Thanks :)

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:55 AM

Posted 11 August 2011 - 11:13 AM

You want a select list. You can put as many of them on a page as you wish. A simple example would be:
<select id="a">
   <option value="apple">Apple</option>
   <option value="aardvark">Aardvark</option>
</select>

<select id="b">
   <option value="blue">Blue</option>
   <option value="bing">Bing</option>
</select>


#3 PCDevil

PCDevil
  • Topic Starter

  • Members
  • 40 posts
  • OFFLINE
  •  
  • Local time:09:55 AM

Posted 11 August 2011 - 01:48 PM

You want a select list. You can put as many of them on a page as you wish. A simple example would be:

<select id="a">
   <option value="apple">Apple</option>
   <option value="aardvark">Aardvark</option>
</select>

<select id="b">
   <option value="blue">Blue</option>
   <option value="bing">Bing</option>
</select>


Thanks, but I want a drop down panel not a drop down menu. I have paragraphs of information, not just a couple of words.

I've been using jquery. I was using toggle which worked fine as a test, but for some reason stopped working when I copied it to my main page I'm working on. I'm not sure it is the best one for my site anyway so I switched to a show/hide panel which technically works.

The code is:
<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>

<p class="flip">Show/Hide Panel</p>

</body>
</html>

I can put one on the page fine, but the problem is I need at least three. When I add more they all expand/close at the same time and overlap each other. How can I get more on one page and make them all readable whether they choose to expand 1,2 or all 3?

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:55 AM

Posted 11 August 2011 - 02:23 PM

If they all 3 have the same class name, then yes, that is exactly what is supposed to happen.

#5 PCDevil

PCDevil
  • Topic Starter

  • Members
  • 40 posts
  • OFFLINE
  •  
  • Local time:09:55 AM

Posted 11 August 2011 - 02:29 PM

If they all 3 have the same class name, then yes, that is exactly what is supposed to happen.


I tried changing the class name, but the same thing still happened.

Edit:
I solved the overlapping problem, but for some reason when you refresh the page all the sections are open not closed like I want them (and they were before) and they still all open and close at the same time.

Edited by PCDevil, 11 August 2011 - 02:36 PM.


#6 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:55 AM

Posted 11 August 2011 - 02:59 PM

If you want them to close, then you need some javascript to close them when the page loads. I assume that JQuery probably has a setting though that will start them out as closed. Maybe not.

I can't say what the problem is without seeing your code. There are code tags that help to preserve the formatting of your code so that we can read it.

#7 PCDevil

PCDevil
  • Topic Starter

  • Members
  • 40 posts
  • OFFLINE
  •  
  • Local time:09:55 AM

Posted 11 August 2011 - 03:11 PM

If you want them to close, then you need some javascript to close them when the page loads. I assume that JQuery probably has a setting though that will start them out as closed. Maybe not.

I can't say what the problem is without seeing your code. There are code tags that help to preserve the formatting of your code so that we can read it.


They were closed - I haven't changed anything to do with that as far as I'm aware but for some reason they are now open.

Full code:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("fast");

});
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#ffffff;
border:solid 1px #000000;
}
div.panel 1
div.panel 2
div.panel 3
{
height:120px;
display:none;
}
</style>

</head>


<body>
<div class="panel 1">
Text here
</div>
<p class="flip">Show/Hide Panel</p>

<div class="panel 2">
Text here
</div>
<p class="flip">Show/Hide Panel</p>

<div class="panel 3">
Text here
</div>
<p class="flip">Show/Hide Panel</p>

</body>



I changed the div class part so it now says panel 1, 2 and 3 and changed it in the top part too where it says div.panel so there are now three lines. Originally they all just said panel and there was only one line for that in the top section.

Changing that has stopped them overlapping, but they still all expand/close at once and they all start off open, not closed.

#8 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:55 AM

Posted 12 August 2011 - 07:54 AM

They still have the same name of class. Elements can have multiple class names, so class="panel 1" means that the element has class name of panel, and 1. Therefore, they still have the same class names. If you want to make the class name unique, try panel_1, panel_2, etc. Also, there are three elements with the class="flip". They are all going to open and close at the same time.

#9 PCDevil

PCDevil
  • Topic Starter

  • Members
  • 40 posts
  • OFFLINE
  •  
  • Local time:09:55 AM

Posted 12 August 2011 - 12:57 PM

Ok, I now have the following:
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip1").click(function(){
$(".panel1").slideToggle("fast");

});
});
$(document).ready(function(){
$(".flip2").click(function(){
$(".panel2").slideToggle("fast");

});
});
$(document).ready(function(){
$(".flip3").click(function(){
$(".panel3").slideToggle("fast");

});
});
</script>

<style type="text/css">
div.panel,p.flip1,p.flip2.p.flip3
{
margin:0px;
padding:5px;
text-align:center;
background:#ffffff;
border:solid 1px #000000;
}
div.panel1
div.panel2
div.panel3
{
height:120px;
display:none;
}
</style>

</head>

<body>
<div class="panel1">
Text here
</div>
<p class="flip1">Show/Hide Panel</p>

<div class="panel2">
Text here
</div>
<p class="flip2">Show/Hide Panel</p>

<div class="panel3">
Text here
</div>
<p class="flip3">Show/Hide Panel</p>

</body>

Now each one expands/closes separately. However, they all start off open not closed and the part where it says show/close panel no longer has a border round it on the second and third panel, only the first. All it shows on the second and third is text to the left (instead of centered and with a border). Any ideas what needs to be changed/added?

Edited by groovicus, 12 August 2011 - 02:53 PM.


#10 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:55 AM

Posted 12 August 2011 - 02:53 PM

I mentioned before that you would probably need to write a small function that once the page loads, it closes the panels.

I also mentioned that there are code tags you can use so that when posting code, it is nicely formatted for others to read. :) Other than that, you probably have an error in our css.

EDIT: so it appears that you have no formatting at all. :( Might want to take some time to do that. I have too many other things happening to take the time to figure out which closing brace goes with which opening brace, and it makes it harder for you to debug your own code.

Edited by groovicus, 12 August 2011 - 02:54 PM.


#11 PCDevil

PCDevil
  • Topic Starter

  • Members
  • 40 posts
  • OFFLINE
  •  
  • Local time:09:55 AM

Posted 12 August 2011 - 03:05 PM

I mentioned before that you would probably need to write a small function that once the page loads, it closes the panels.

I also mentioned that there are code tags you can use so that when posting code, it is nicely formatted for others to read. :) Other than that, you probably have an error in our css.


Thanks. I've never used jQuery before and, while I managed to edit that a little and have done similar for other coding languages (e.g. Javascript), I haven't a clue where to start in writing a small function for that.

And sorry, I'd forgotten you mentioned that, but to be honest I can read it easier as it is lol. Do you mean the Insert Code Snippet? I'll try and remember to use it in future. I did wonder about the CSS, but I can't see anything obviously wrong with it and I don't think I've changed anything for that bit...unless that's the problem lol. In which case I've no clue what to change.

#12 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:55 AM

Posted 12 August 2011 - 04:53 PM

It is not easy to read. Compared to your code, look at properly formatted code:
<script type="text/javascript">

   $(document).ready(function(){
      $(".flip1").click(function(){
         $(".panel1").slideToggle("fast");
      });
   });

   $(document).ready(function(){
      $(".flip2").click(function(){
         $(".panel2").slideToggle("fast");
      });
   });

   $(document).ready(function(){
      $(".flip3").click(function(){
         $(".panel3").slideToggle("fast");
      });
   });

</script>

I can tell immediately how the code is nested.

As far as the javascript to close the panles when the page loads. I am sure jquery has an onload function. You might also want to check out how to set styles on page elements.

I wonder what would happen if you did something like this:
<div class="panel1"  style="display:none;">
   Text here
</div>


#13 PCDevil

PCDevil
  • Topic Starter

  • Members
  • 40 posts
  • OFFLINE
  •  
  • Local time:09:55 AM

Posted 08 September 2011 - 04:35 PM

It is not easy to read. Compared to your code, look at properly formatted code:

<script type="text/javascript">

   $(document).ready(function(){
      $(".flip1").click(function(){
         $(".panel1").slideToggle("fast");
      });
   });

   $(document).ready(function(){
      $(".flip2").click(function(){
         $(".panel2").slideToggle("fast");
      });
   });

   $(document).ready(function(){
      $(".flip3").click(function(){
         $(".panel3").slideToggle("fast");
      });
   });

</script>

I can tell immediately how the code is nested.

As far as the javascript to close the panles when the page loads. I am sure jquery has an onload function. You might also want to check out how to set styles on page elements.

I wonder what would happen if you did something like this:
<div class="panel1"  style="display:none;">
   Text here
</div>


Sorry it took me so long to reply to this. Totally forgot about it tbh, I was trying to find another way to do what I wanted, which I have managed. It is jquery, but a much simplier code.

And it may be easier for YOU to read but it's not easier for me to read. Green text gives me a headache so looking at that code makes it harder for me than just plain text. I get how it highlights parts so it's easier to see a problem or whatever, but personally (apart from the green problem) the colours just distract me from the text. Not having a go or anything, just explaining. So I'm happy to use it to help you or others, but it's not a feature I think 'I must use this, I know how useful it is' so if I forget then I'm sorry.

I did try that, but on a slightly different code and it kinda worked, but I had to alter a few things. Anyway it's not quite the way I pictured it, but I have a drop down panel that works and I just want to say thanks for your help :) Hopefully in the future I'll find it easier to code with jquery lol.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users