Expand/collapse lines of text
-
I have created a workaround to expand lines of text by using only part of the quiz shortcode.
[quiz] [wrong] .....put your text here..... [explanation] ....place the text here that you want hidden until the user wants to expand text above [/explanation] [/wrong] [/quiz]You can see it on the page below under CATECHISM CONNECTIONS
https://ewtn.blog/2017/12/07/sen-franken-says-he-will-resign/
QUESTIONS:
1. Can any of the properties of this shortcode text be altered using CSS?
2. The workaround is far from ideal (e.g. once the text is expanded there is no way to collapse it again unless the page refreshes.) One could put a link in their, which would refresh the page, but it would return to the top. Anything I am not thinking of?The blog I need help with is: (visible only to logged in users)
-
It was easy enough to answer #1 (so I apologize for posting something too readily without making an effort to find the answer myself). Here is what I came up with…
div.quiz div.answer.last {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
padding-top: 0px;
margin-left: -18px;
}div.quiz div.answer.wrong {
color: #000;
font-size:110%;
}I am wondering if these are the only two selectors?
and of course #2 question above.
-
Here’s another selector and properties to change.
div.quiz {
border: 1px solid #deede3;
background-color: #f3f3f3;
padding: 1em;
line-height: 1.3em;
margin-bottom: 2em;
border-radius: .2em;
} -
-
This is for #2
So the effect you are talking about is called an “accordion”
Here is a plugin that will do it
https://wordpress.org/plugins/accordion-shortcodes/
(I have not used this plugin but the other one named Accordion WP is labeled as unsafe)You can also do this by using jQueryUI. I do not know if your plan or WordPress.com allows you to include it. Usually you write the script tag for it before the closing body link. or use wp_enqueue_script.
There is also a widget that will load it for you
https://wordpress.org/plugins/jquery-ui-widgets/Here is the jQueryUI accordion info
-
-
thanks for responding, however, I have wordpress.com not wordpress.org. I often think about switching because the possibilities seem to be endless with the latter, but I don’t know how much of a learning curve or what headaches there would be.
-
Since there are CSS classes assigned to the different elements on the quiz section, you can use those to style the different elements as desired. I’m not sure what exactly it is that you are wanting to modify when you say “properties”.
The code doesn’t have a collapse function, and it that is not something that could be added with CSS. The only way would be to make a link that refreshes the page.
-
I want to decrease size of padding between quiz div.answer boxes and possibly change the background color
-
stand by… I am currently merging the two quiz boxes into one. This will get rid of the space between the “two answers”. I will restate my questions in a few minutes.
-
This code will remove the padding form the top and bottom of the div.quiz.
div.quiz { padding: 0em 1em !important; }the first number is the top/bottom padding and the next is the left/right. If you want to do each one they go in the order top right bottom left (basically clockwise).
This will change the background color of the quiz to red
div.quiz { background: red; } -
ok we are STARTING OVER
If you would be so kind to go to
https://ewtn.blog/2017/12/07/sen-franken-says-he-will-resign/
and look at Catholic Catechism Connections
I have shortcode for a quiz, but do not include the question or the correct answer. Only two incorrect answers.
I have tried to change things with the following selector, but nothing works.
div.quiz {
border: 1px solid #deede3;
background-color: #f3f3f3;
padding: 1em;
line-height: 1.3em;
margin-bottom: 2em;
border-radius: .2em;
}WHAT I WANT TO CHANGE:
1. color of background
2. Incorrect answer title to black (because on my website red indicates a link, so I don’t want it to be red.
3. it would be nice to have the text (before the collapse) be red, not black. -
thanks dtlevin
the first code only worked for the top answer, not the last
the color did not work
-
Try this
Background color and paddingdiv.quiz { background: white !important; padding: 0em 1em !important; }Change text before answer to red
.answer { color: red; }Change red text to black
answer.wrong { color: black !important; }You might need to add “!important” to the end of that one as well if it does not work. Also make sure to remove any code I sent you before so you don’t have a bunch a garbage in there.
-
-
that works, thanks.
The bottom padding is still off but with the white bkg it’s fine.
Now how to get rid of the border?
-
-
-
As for as the answer color, it works if you add div.
div.answer.wrong {
color: black !important;
} -
I did not see the code
answer.wrong { color: black !important; }in your style sheet.
This is more specific so try this if the above isn’t working.
div.quiz div.answer.wrong { color: black !important; }Remove border
div.quiz { background: white !important; padding: 0em 1em !important; border: none !important; }
- The topic ‘Expand/collapse lines of text’ is closed to new replies.
WordPress.com Forums 