CSS Help

[Guest]

On my site i have hit a stopping point, I have collapsible panels so that people can glide through the site and see all the content easily without having to scroll past the contact forms. Here is my current code:

 

<style>.panel-heading a:after {    font-family:'Glyphicons Halflings';    content:"\e014";    float: right;    color: grey;}.panel-heading a.collapsed:after {    content:"\e252";}</style> <a name="contact"></a><div class="panel panel-default">      <div class="panel-heading">        <h3 class="panel-title"><a data-toggle="collapse" data-target="#collapsecontact" href="#collapsecontact" class="collapsed"><span class="glyphicon glyphicon-phone-alt"></span> Contact</a></h3>      </div>      <div class="panel-body"><div id="collapsecontact" class="panel-collapse collapse"><center><form action="contact.php" method="POST"><p><strong>Name</strong></p> <input type="text" name="name"><p><strong>Email</strong></p> <input type="text" name="email"><p><strong>Message</strong></p><textarea name="message" rows="6" cols="25"></textarea><br /><button type="submit" class="btn btn-success">Send</button><button type="reset" class="btn btn-danger">Clear</button></form></center>      </div> </div>   </div>

 

This is the panel and is collapsable what i want to do is make it so that the body of the panel when collaged is "Click to expand".

Edited April 2, 2015 by Guest
added code tags :)

[Paralectic]

Why not create the "Click to expand" element, set it no display: none; and use javascript to create a display it if the panel is collaged.

 

edit: using the CSS @media rule is even better for this.

[Guest]

Why not create the "Click to expand" element, set it no display: none; and use javascript to create a display it if the panel is collaged.

 

edit: using the CSS @media rule is even better for this.

example? Im new to JScript and CSS

[MrLewisMHarris]

You can make a "Click to Expand" Element, and when you click it it triggers a javascript function that changes the CSS element from "display:none" to "display:block".

 

To do this, make a div element (which will `contain the expandable content) set the element to display:none by default, then build the rest of the element, then in a Javascript element (in a <script> ** code here ** </script> tag in the html header) make a function along the lines of the following:

function expandElement() {	document.getElementById('thisElement').style.display="inline";}

Now, in the html body, within the div, insert an "onlick" tag, to make it look like this:

<div id="thisElement" onclick="expandElement()">Div Content!!!</div>

Make sure the name of the function in the onlick tag is the same as the one in the script function, and also the id is the same in the jscript.

 

Have fun and play with it I'd recommend learning Javascript as well if you don't know it already.

[Guest]

You can make a "Click to Expand" Element, and when you click it it triggers a javascript function that changes the CSS element from "display:none" to "display:block".

 

To do this, make a div element (which will `contain the expandable content) set the element to display:none by default, then build the rest of the element, then in a Javascript element (in a <script> ** code here ** </script> tag in the html header) make a function along the lines of the following:

function expandElement() {	document.getElementById('thisElement').style.display="inline";}

Now, in the html body, within the div, insert an "onlick" tag, to make it look like this:

<div id="thisElement" onclick="expandElement()">Div Content!!!</div>

Make sure the name of the function in the onlick tag is the same as the one in the script function, and also the id is the same in the jscript.

 

Have fun and play with it I'd recommend learning Javascript as well if you don't know it already.

 

Thanks for the help, am going to go through w3Schools tutorials on jScript, how i learnt a lot of HTML

[MrLewisMHarris]

Thanks for the help, am going to go through w3Schools tutorials on jScript, how i learnt a lot of HTML

 

No problem. If you need any further help with anything just reply in this thread.

[Shan-Dysigns]

You can make a "Click to Expand" Element, and when you click it it triggers a javascript function that changes the CSS element from "display:none" to "display:block".

 

To do this, make a div element (which will `contain the expandable content) set the element to display:none by default, then build the rest of the element, then in a Javascript element (in a <script> ** code here ** </script> tag in the html header) make a function along the lines of the following:

function expandElement() {	document.getElementById('thisElement').style.display="inline";}

Now, in the html body, within the div, insert an "onlick" tag, to make it look like this:

<div id="thisElement" onclick="expandElement()">Div Content!!!</div>

Make sure the name of the function in the onlick tag is the same as the one in the script function, and also the id is the same in the jscript.

 

Have fun and play with it I'd recommend learning Javascript as well if you don't know it already.

 

I'm not following your suggestion. Based upon the OP's question and code provided, how does this solve the problem? Something is missing. You wrote a function to change the display property for <div id="thisElement" onclick="expandElement()">Div Content!!!</div>

 

It appears the OP wants to have panels that expand and collapse, but no one explained "how" to set the panel as collapsed by default. You created a div (id="thisElement"), but your function isn't going to do anything to that div. If that div was set to display: none by default, then there would be no visible div to click on in order to call your function. There is no code to reverse the display either (how will any div be able to get collapsed at this point)?

 

What am I missing here?

 

@rap_19 Where is the rest of your HTML code? It would be easier to answer your question with more complete code. Also, considering you mentioned that you are still learning HTML/CSS, I would keep aware of deprecated code (ie. <strong> and <center> should be styled using CSS). Is there an active website that shows the effect you are trying to accomplish because without more code or more HTML construction, I can't see how your question can be answered.

[MrLewisMHarris]

I'm not following your suggestion. Based upon the OP's question and code provided, how does this solve the problem? Something is missing. You wrote a function to change the display property for <div id="thisElement" onclick="expandElement()">Div Content!!!</div>

 

It appears the OP wants to have panels that expand and collapse, but no one explained "how" to set the panel as collapsed by default. You created a div (id="thisElement"), but your function isn't going to do anything to that div. If that div was set to display: none by default, then there would be no visible div to click on in order to call your function. There is no code to reverse the display either (how will any div be able to get collapsed at this point)?

 

What am I missing here?

 

@rap_19 Where is the rest of your HTML code? It would be easier to answer your question with more complete code. Also, considering you mentioned that you are still learning HTML/CSS, I would keep aware of deprecated code (ie. <strong> and <center> should be styled using CSS). Is there an active website that shows the effect you are trying to accomplish because without more code or more HTML construction, I can't see how your question can be answered.

 

Yes that is true...

 

You can make a small button like <button onclick="expandElement()">Click to Expand</button>

 

and then in the function make it change the style from "display:none" (in the CSS) to "display:inline". If you want it to expand underneath you could put the content of the invisible div in the html, but obviously it won't be seen, but it becomes visible when you click the button. To make it do the opposite, you could just have another button in the html that would become visible as well, a "click to collapse" button, which does exactly the same thing. So when you click the "click to expand" button, it makes the collapse button and the content visible, but makes itself invisible, then the collapse button does the opposite by making the expand button visible but the collapse button invisible. (when I say invisible I mean display:none).

 

His question seemed pretty straight forward to me, and I'm sure coming in here and starting conflict (from what I can tell) isn't going to help anyone.

[Shan-Dysigns]

His question seemed pretty straight forward to me, and I'm sure coming in here and starting conflict (from what I can tell) isn't going to help anyone.

 

Wow! You call my response "conflict"? I don't even think it rises to the level of constructive criticism (because I wasn't criticizing; I was simply commenting on the fact that I believe there is more to say in solving the OP's question). I mean, if you want to get technical (since I'm apparently here to cause conflict), I'm not sure why you would use "inline" to bring back the div's appearance instead of "block", but again, there is missing HTML code so it's hard to understand what he wants in context. He mentioned "panel" and "collapsing". Just making an element's display property "disappear" doesn't really give the effect of a panel collapsing or expanding. Panels open and close, not disappear and reappear. If the OP just wants the panel to appear then disappear, then fine, but that's not what I think of when I hear the words "collapsing panel". With me and my conflicting response, all I'm going to say then is if your explanation solved the OP's question, then that's all that matters. I'm not here to battle wits or ego. I just believe there is more to be said to solve this question. What I don't understand is that your very first comment was "Yes that is true...", but then you have issue with what I said? How is that conflict when you agreed with me?

 

Can you please show me with the OP's code and your first response how that would result in a working collapsing panel.

Thanks.

[vorticalbox]

what about jq mobile? 

 

http://www.w3schools.com/jquerymobile/jquerymobile_collapsibles.asp

[Guest]

I have finished the panels, thanks all for your help! Final can be seen here if you are interested: http://www.rapcr.co.uk/ @ Paralectic @vorticalbox @Shan-Dysigns

[Truth]

Hi there,

 

Just a bit of a helping hand when it comes to scripts . I see you are loading JQuery from google API

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 

Why dont you load the script inside your project like you have with your bootstrap file?

 

<script src="../../dist/js/bootstrap.min.js"></script>

 

This saves a significant amount of load time, also prevents your site from breaking if google API goes down for whatever reason