We Keep Coding

jQuery ,Css display none - block vs. hide- show

I am trying to hide #showMyList, #showMyName these divs. On click button need to show divs.
Both div has separate buttons. I want to see one div at a time. I can give different css (style)to them so that they will look different.
Which one will be more useful jQuery hide() and show()
Or display none and block?
#showMyList, #showMyName{
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left:200px;
}
</style>
<script>
$('document').ready(function(){
$('showMyList').css("display", "none");
$('showMyAcc').css("display","none");
$("myList").click(function(){
$("showMyList").css("display", "block");
$("myAcc").click(function(){
$("showMyAcc").css("display", "block");
});
});
});

Consider the following example.
$(function() {
$('#showMyList, #showMyAcc').hide();
$("#myList").click(function() {
$("#showMyAcc").hide();
$("#showMyList").show();
});
$("#myAcc").click(function() {
$("#showMyList").hide();
$("#showMyAcc").show();
});
});
#showMyList,
#showMyAcc {
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myList">Show List</button>
<button id="myAcc">Show Name</button>
<div id="showMyList">List</div>
<div id="showMyAcc">Name</div>
You can Hide both elements and then reveal or show 1 at a time.

Rotate Shape on Click

I'm trying to rotate the shape x with an click event using jQuery and CSS. I want to target the x with an id and toggle a class of rotate on and off. The rotate class uses the CSS transform property to create the effect.
$('#x').click(function() {
$('#x').toggleClass('.rotate');
});
.container {
height: 500px;
width: 960px;
margin: 0 auto;
display: flex;
background: skyblue;
}
#x {
margin: auto;
font-size: 9em;
color: green;
}
.rotate {
transform: rotate(7deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="x">x</div>
</div>

In some functions from jquery such as addClass, removeClass, toggleClass, you don't need to specify the selector with a dot, because you already are telling thats is a class. example:
$(this).removeClass("yourClass");
$(this).addClass("yourClass");
$(this).toggleClass("yourClass");
Your question fixed:
$('#x').click(function(){
$('#x').toggleClass('rotate');
});
.container{
height: 500px;
width: 960px;
margin: 0 auto;
display: flex;
background: skyblue;
}
#x{
margin: auto;
font-size: 9em;
color: green;
}
.rotate{
transform: rotate(7deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
<div id="x">x</div>
</div>

You made an error with your Javascript:
$('#x').click(function() {
$('#x').toggleClass('.rotate');
});
you are calling toggleClass so you don't need to add a . to your selector. so:
toggleClass('.rotate')
should be:
toggleClass('rotate')

CSS Expand / Contract Animation to Show/Hide Content

I am trying to create a box that can expand and collapse with a simple slide out animation. If you run the example below, the idea is that it starts with one red line and when you click the button it separates into two read lines and gently expands to reveal the content like pulling a draw out of a table.
I've tried both transform, animation, relative: positioning with top, and i'm unable to get the desired effect.
The containing box should expand in size
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-contract {
border-bottom: 1px solid red;
}
.expand-contract {
transform: translateY(-100%)
overflow: hidden;
}
#keyframes slide-in {
100% {
transform: translateY(0%)
}
}
.expanded {
background-color: green;
animation-name: slide-in;
animation-duration: 1s;
}
.collapsed {
background-color: red;
transform: translateY(-100%)
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>

You can achieve this using the CSS transition along with toggled styles. Initially you may think to transition the height (from 0 to initial so that it expands dynamically based on height) but unfortunately CSS transition doesn't properly handle this.
Instead, you can wrap it in a container of its own with overflow: hidden and then use a margin-top: -100% to hide it, and 0 to show it.
Here is your code with this modification:
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-container {
overflow: hidden;
}
#expand-contract {
border-bottom: 1px solid red;
margin-top: -100%;
transition: all 1s;
}
#expand-contract.expanded {
background-color: green;
margin-top: 0;
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>

hope to help you
HTML
<div class="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div class="expanded" id="expand-contract">
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
</div>
<button class="header" onclick="expandContract()">Expand/Contract</button>
css
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .expanded {
display: none;
padding : 5px;
}
js
function expandContract() {
$header = $(".header");
$content = $("#expand-contract")
$content.slideToggle(500, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
};
see here enter code here

How to change the behavior of the following css button?

Hello I am working in the following small page, I have two buttons, one to hide a textarea and the other to show it, in fact they work well however I would like to color the buttom called: Hide in green, in order to do it I tried:
<div class="wrapper">
<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color= "green"; ><span>Hide</span></button>
</div>
but It doesn't affect the behavior of my button, I would like to appreciate any suggestion to fix the problem, I created the following jsfiddle file to show the problem:
https://jsfiddle.net/12bkgd4q/9/

You are setting background-color= "green"; outside style attribute, you need to put it inside style attribute
<button class="button buttom2" style="vertical-align:middle;background-color:green" onclick="hide()";><span>Hide</span></button>
JSFIDDLE

background-color is a style property, and the colour green is the property-value of that style property; as they're style properties they should be in the style attribute along with the other style(s):
<button class="button buttom2" style="vertical-align:middle; background-color: green;" onclick="hide()"><span>Hide</span></button>
What you may have been trying to use, but mis-remembering, is the old (now obsolete) bgcolor attribute, which would also set the background-color of an element.

flip around background color and the JavaScript call, like this:
style="vertical-align:middle; background-color:green;" onclick="hide();"

OBSERVATIONS:
Declaring inline-style css works, but the best approach is to use external css to separate style from content as well as using unobstrusive javascript to bind events.
SOLUTION:
Change misspelling in "buttom2" to "button2".
Remove inline-styles. (Remove style attribute from buttons tag). Add the desired css properties in your external CSS file.
Remove onclick event from your button tag and add identifiers to your buttons so that you can later bind event listeners with jQuery in a separate JS file.
CODE SNIPPET:
var sTextO = $("#texto");
$("#triggerBtn1").on("click", function() {
sTextO.show();
});
$("#triggerBtn2").on("click", function() {
sTextO.hide();
});
body {
background-color: blue;
}
textarea {
display: block;
margin-left: auto;
margin-right: auto;
}
#out1 {
width: calc(100% - 150px);
text-align: center;
font-style: normal;
font-weight: bold;
font-size: 28px;
white-space: pre;
background-color: black;
padding: 25px;
border: 25px solid navy;
margin: 25px;
box-shadow: 0 8px 16px red;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 4px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 25px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
vertical-align: middle
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 28px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button2 {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="70" rows="15" id="texto"></textarea>
<div id="out1"></div>
<div class="wrapper">
<button id="triggerBtn1" class="button button1"><span>Show</span>
</button>
</div>
<div class="wrapper">
<button id="triggerBtn2" class="button button2"><span>Hide</span>
</button>
</div>
MORE INFO:
JS: Why is using onClick() in HTML a bad practice?
CSS: What's so bad about in-line CSS?

Add this into css
.button2 {
background: green;
}
And there is a typo here -
<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color="green" ;><span>Hide</span></button>
Change the classname from "buttom2" to "button2"

The color should be set in the style attribute of the button tag.
<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()">
https://jsfiddle.net/Lhe768Ld/

Issue was with " " , basically style tag ended just after vertical-align, so it does not recognize the background-color. Include them inside " ".
Hope this would solve your issue:
<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()"><span>Hide</span></button>

Is it possible to have a non-rectangular div?

I need to shape ONE div tag in the following shape:
Is it possible to make it cross browser? I don't necessarily need rounded corners. I need it so I can change the color of the borders of the whole div on hover, so I assume it can't be achieved by using two divs.

Yeah, you can do that using HTML and CSS like this: http://jsfiddle.net/broofa/364Eq/
It's essentially using three divs to aggregate the mouse events, like so:
<div id="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
And I use a :hover rule on the outer element to affect the border colors on the inner divs:
#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}
The only quirk with this markup is that the content area - the area you drew in your image - is that it's two divs, not one. So text won't wrap and flow the way you might expect. Also, this may not work so well on older (IE6-7) browsers. But FF, Chrome, Safari, Opera should probably be okay.

A one div solution using pseudo elements:
/* relevant styles for shape */
.tab {
border-top-left-radius: 0px;
margin-left: 100px;
}
.tab:before {
content:"";
display: block;
position: relative;
height: 50px;
width: 50px;
right: 52px; /* width + border width */
top: -2px;
background-color: white;
border: inherit;
border-right-width: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* styles to look like example */
div{
box-sizing: border-box;
background-color: white;
border: 2px solid red;
height: 100px;
width: 200px;
border-radius: 5px;
}
div:hover {
border-color: green;
}
<div class="tab"></div>

See this jsFiddle example:
<div id="main">
<div id="div1" class="border">
</div>
<div id="div2" class="border">
</div>
</div>

You can either use a map or use 2 divs and alter the borders so it looks like one shape.

two options that I can think of:
1) give the div a background image and use CSS pseudo class :hover to change the background image to one that indicates a hover state
2) put three div's inside a wrapper, and position them so so you have one in the upper left hand corner, and then two stacked on top of each other, so that you can simulate the top half of a larger div missing the upper left half border. I don't think CSS alonw can target all the divs in order to change their borders, so will probably have to use JS to execute the hover behavior, by applying an event handler to all three divs.

No. Divs are ALWAYS rectangular. You could fake it in a number of ways (using a background image would be one option).
As for using two DIVs, sure you could. The hover could be done with CSS3 and child selectors of a parent div or you could JavaScript to change the class of both divs when hovering over either one of them.

Definitely requires two or three div's unless you use a background image
Here's a three-div solution
http://jsfiddle.net/pxfunc/SUuF6/
Its cross-browser compatible. The hover won't work in IE6, but it will in IE7+. The rounded corners will show based on browser support
HTML:
<div id="fancyShape">
<div id="main"><div></div>
<div id="panHandle"></div>
</div>
CSS:
#fancyShape {position:relative;width:504px;height:304px;}
#main {
margin-left:100px;
width:400px;
height:300px;
border:solid 2px #000;
border-radius:0 15px 15px 15px;
}
#panHandle {
width:100px;
height:120px;
position:absolute;
top:0;left:0;
border-top:solid 2px #000;
border-left:solid 2px #000;
border-bottom:solid 2px #000;
border-radius:15px 0 0 15px;
}
/* hover effect */
#fancyShape div {background-color:#fff;}
#fancyShape:hover div {background-color:#ff0;border-color:red;}

Perhaps you could use Border-radius along with 2 or 3 div's to get the look you want. The only issue then is it's not supported in all browsers.

Use multiple divs, as others have suggested.
http://jsfiddle.net/thomas4g/7B5MA/14/
Keep in mind that it'll be very hard to flow content in this.

<!DOCTYPE HTML>
<html>
<head>
<style>
html{height: 100%; width: 100%;}
body{height: 100%; width: 100%;}
#wrapper{
position: relative;
top: 50px;
right: 25%;
width: 565px;
height: 440px;
margin: 0 auto;
padding: 0px;
}
#left{
position: absolute;
width: 100px;
height: 50px;
border: 2px solid black;
border-right: none;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
background-color: #ffffff;
}
#right{
position: absolute;
left: 100px;
width: 440px;
height: 440px;
border: 2px solid black;
-moz-border-radius: 10px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
border-radius: 10px;
padding-left: 25px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#wrapper').hover(
function () {
$(this).children('#left').css({'border':'2px solid red', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid red'});
},
function () {
$(this).children('#left').css({'border':'2px solid black', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid black'});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="right">Some content here</div>
<div id = "left"></div>
</div>
</body>
</html>
You can use CSSPIE for rounded orners for IE