User:Flashjay/testbox table styling 03: Difference between revisions

From GCD
Jump to navigation Jump to search
No edit summary
No edit summary
Line 25: Line 25:


hide small cover show big cover:
hide small cover show big cover:
span[id^="hide1"]:target ~ div[id^="toast1"]
 
<nowiki>span[id^="hide1"]:target ~ div[id^="toast1"]
{
{
     order: 4;
     order: 4;
}
}</nowiki>
 
 


<nowiki><a href="#detailView-1">Show View1</a></nowiki>


<nowiki><p id="detailView-1">View1</p></nowiki>


<nowiki><a href="#detailView-1">Show View1</a>
<nowiki><a href="#detailView-2">Show View2</a></nowiki>
<p id="detailView-1">View1</p>


<a href="#detailView-2">Show View2</a>
<nowiki><p id="detailView-2">View2</p></nowiki>
<p id="detailView-2">View2</p>
</nowiki>





Revision as of 18:09, 3 January 2023

Cover
3 4
note


Test cover issue.jpg Test_NOcover_issue.png Test 1 cover issue.png Test 2-4 cover issue.png


2 covers stacked using css grid. change css code to resee both.

hide small cover show big cover:

span[id^="hide1"]:target ~ div[id^="toast1"] { order: 4; }


<a href="#detailView-1">Show View1</a>

<p id="detailView-1">View1</p>

<a href="#detailView-2">Show View2</a>

<p id="detailView-2">View2</p>


Show View1

View1

Show View2

View2