i need help with the border radius. i want the bottom when its closed to have rounded corners and when its open to have rounded corners, all i can do is get the corners for when its open but it doesnt turn out rite heres what i have heres what i want it to look like. the rounded corners for the closed part have to disappear when its open <html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script><script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } #panel { padding: 0px; text-align: left; font-size: 10px; display: none; } </style></head><body> <div id="flip">Forum Jump</div> <div id="panel"> <table width="1300px" style="border-left: 0px; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" cellspacing="0" border="1" class="tablejump"> <tbody><tr> Code (markup): how can i get the cellspacing border solid black http://thenotablenook.com/viewforum.php?f=5 i got the corners when its closed but somehow i need to get the white part thats not rounded black
#panel,#flip { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 1px solid Code (markup): Change 1px solid Code (markup): to 4px or higher, until it covers the white space. let me know if it works.
You can just make a class which removes the radius when attached. Pretty simple thing to do with CSS and jQuery. I haven't tested the code below but it should work. <html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script><script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow").toggleClass('closed'); }); }); </script> <style type="text/css"> #panel,#flip { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } #panel { padding: 0px; text-align: left; font-size: 10px; display: none; } .closed{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } </style></head><body> <div id="flip">Forum Jump</div> <div id="panel"> <table width="1300px" style="border-left: 0px; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" cellspacing="0" border="1" class="tablejump"> <tbody><tr> Code (markup):
Well you should at least be able to work this out from the code I've started you out with. I mean it's not exactly difficult is it?
Hi, Your code is correct. But you not set any Height.... U will try this code .. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script><script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } #panel { height:100px; padding: 0px; text-align: left; font-size: 10px; display: none; } </style> </head> <body> <div id="flip">Forum Jump</div> <div id="panel"> <table width="1300px" style="border-left: 0px; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" cellspacing="0" border="1" class="tablejump"> <tbody><tr> </body> </html>
Try out this code. I've actually had some time to test it out so it should help you. You should be able to take what I've done and put it into your own. <html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script><script> $(document).ready(function(){ $('.panel-container h2').click(function(){ var _this = $(this); $(this).parent().children('.panel').slideToggle('fast', function() { _this.toggleClass('closed'); }); }); }); </script> <style type="text/css"> .panel-container h2{ margin-bottom:0; } .panel, .flip, .panel-container h2 { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .panel { padding: 0px; text-align: left; font-size: 10px; display: none; } .panel table.tablejump{ border-left: 0px; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; width:100%; } .panel-container h2.closed{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; } </style></head><body> <div class="panel-container"> <h2>Forum Name</h2> <div class="panel"> <table cellspacing="0" border="1" class="tablejump"> <tbody> <tr> <td>Body</td> <td>Body</td> <td>Body</td> <td>Body</td> <td>Body</td> </tr> <tr> <td>Body</td> <td>Body</td> <td>Body</td> <td>Body</td> <td>Body</td> </tr> <tr> <td>Body</td> <td>Body</td> <td>Body</td> <td>Body</td> <td>Body</td> </tr> <tr> <td>Body</td> <td>Body</td> <td>Body</td> <td>Body</td> <td>Body</td> </tr> </tbody> </table> </div> </div> Code (markup):
alrite were getting somewhere that took care of the part when its open, the border radius isnt there and its all flat like its supposed to look, thank you i have this border all thick so i tried taking any border i could out .panel, .flip, .panel-container h2 { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 0px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } Code (markup): changing this to 0 inside the above makes it fine border: 0px solid #000; Code (markup): but it takes the border radius out of the forum jump when its closed theres this on each side, it looks like the forum jump when its open, which is the table, is inside the whole forum width or theres some border left rite problem and when its open thers all that white left over hanging there on the bottom the pic i took was too big so i just posted a link http://forumbytunes.com/viewforum.php?f=13 it ultimately should look smooth and clean like this <html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script><script> $(document).ready(function(){ $('.panel-container h2').click(function(){ var _this = $(this); $(this).parent().children('.panel').slideToggle('fast', function() { _this.toggleClass('closed'); }); }); }); </script> <style type="text/css"> .panel-container h2{ margin-bottom:0; } .panel, .flip, .panel-container h2 { padding-right: 10px; text-align: right; font-size: 14px; font-weight: bold; font-style: italic; color: #000; border: 0px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .panel { padding: 0px; text-align: left; font-size: 10px; display: none; } .panel table.tablejump { border-left: 0px; border: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; width: 100%; } .panel-container h2.closed { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; } </style></head><body> Code (markup):
You need to stop speaking to me like I must help you. You can pay me my hourly rate of £28.00 if you want me to help you any further. I'v helped you enough, you need to learn to code or hire someone!!! Is it that hard?