0
i created a custom posting template and wanted to improve it as follows
I wanted to leave you like this
with option to click and change between the "requirements" and the "installation" to show the text within each 1! This is the custom posting code
<div>
<div style="text-align: center;">
</div>
<br />
<div class="su-tabs su-tabs-style-default" data-active="1" style="-webkit-text-stroke-width: 0px; background: rgb(238, 238, 238); border-radius: 3px; border: 0px; box-sizing: border-box; color: black; font-family: "droid sans"; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; list-style: none; margin: 0px 0px 1.5em; orphans: 2; outline: 0px; padding: 3px; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<div class="su-tabs-nav" style="border: 0px; box-sizing: border-box !important; list-style: none; margin: 0px; outline: 0px; padding: 0px;">
<div style="margin: 0px;">
<span class="su-tabs-current" data-target="blank" data-url="" style="background: rgb(255 , 255 , 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; box-sizing: border-box; color: red; cursor: default; display: inline-block; font-size: 1.3em; font-weight: 700; line-height: 20px; list-style: none; margin: 0px 3px 0px 0px; min-height: 40px; outline: 0px; padding: 10px 15px; transition: all 0.2s ease 0s;"><strong style="border: 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: 0px; padding: 0px;">REQUISITOS:</strong></span></div>
</div>
<div class="su-tabs-panes" style="border: 0px; box-sizing: border-box; color: #333333; list-style: none; margin: 0px; outline: 0px; padding: 0px;">
<div class="su-tabs-pane su-clearfix" style="background: rgb(255, 255, 255); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 0px; box-sizing: border-box !important; font-size: 13px; list-style: none; margin: 0px; outline: 0px; padding: 15px;">
<div style="margin: 0px;">
<br /></div>
</div>
</div>
</div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</div>
<br />
<div class="su-tabs su-tabs-style-default" data-active="1" style="-webkit-text-stroke-width: 0px; background: rgb(238, 238, 238); border-radius: 3px; border: 0px; box-sizing: border-box; color: black; font-family: "droid sans"; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; list-style: none; margin: 0px 0px 1.5em; orphans: 2; outline: 0px; padding: 3px; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<div class="su-tabs-nav" style="border: 0px; box-sizing: border-box !important; list-style: none; margin: 0px; outline: 0px; padding: 0px;">
<div style="margin: 0px;">
<div style="text-align: center;">
<span class="su-tabs-current" data-target="blank" data-url="" style="background: rgb(255 , 255 , 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; box-sizing: border-box; color: red; cursor: default; display: inline-block; font-size: 1.3em; font-weight: 700; line-height: 20px; list-style: none; margin: 0px 3px 0px 0px; min-height: 40px; outline: 0px; padding: 10px 15px; transition: all 0.2s ease 0s;"><strong style="border: 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: 0px; padding: 0px;">INSTALAÇÃO:</strong></span></div>
</div>
</div>
<div class="su-tabs-panes" style="border: 0px; box-sizing: border-box; color: #333333; list-style: none; margin: 0px; outline: 0px; padding: 0px;">
<div class="su-tabs-pane su-clearfix" style="background: rgb(255, 255, 255); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 0px; box-sizing: border-box !important; font-size: 13px; list-style: none; margin: 0px; outline: 0px; padding: 15px;">
<div style="margin: 0px;">
<br /></div>
</div>
</div>
</div>
<div style="text-align: center;">
<br /></div>
</div>
But why did you replicate the element
su-tabs
not only defined a new element insu-tabs-nav
and insu-tabs-panes
? Do you have any idea how this HTML works? Could you explain element by element to us?– Woss
Because you do not part of a Tabs component ready? There is something not worth doing from 0 to my view... Search for "Tab Component" in Google you will find a multitude of examples...
– hugocsl
I saw it on a blog, but they only present the commands and a very vague model, I just modified the fonts , colors and rounded the edges, and wanted to put the installation and the requirement together so I could change from one stop to the other to the post not stay so long, gave mó of the work to assemble this and the width adapts in my blog perfectly. but thanks for your attention
– Tio Skull
i made a different one, there is only the image Ex: "Requirements: Click here to Expand Expand" ai mostra o texto! economizo um bom espaço!
– Tio Skull