Change div CSS with click

Question

I’m trying to create a portfolio, his idea is that by clicking on Banner, the Logos disappears and if you click on Logos again, it re-appears and the Banner goes away. In this case, by clicking 1 of the buttons the others would disappear, adding the class display_n, who is with the property display:None;

.portfolio {
	padding-left: 25px;
	padding-right: 25px;
	display: inline-block;
	background-color:#090909;
	margin-top: 0px;
	width: 1298px;
	padding-bottom: 100px;
	
}
.portfolio h1 {
	color: rgb(226, 226, 226);
	font-size: 90px;
	text-align: center;
	
}
.box_button_port {
	width: 200px;
	margin-left: 50px;
	float: left;
}
.box_button_port p {
	color:aliceblue;
	font-size: 12px;
	margin-top:-10px;
}
.portfolio a { 
	text-decoration: none; 
}
.button_p {

	
	width: 126px;
	height: 46px;
	border: rgba(18,229,88,1.00) 1px solid;
	border-radius: 5px;
	background: none;
	color: white;
	font-size: 18px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	margin-bottom: 25px;
	cursor:pointer;
	
}
.button_p:hover {
	background:rgba(11, 236, 61, 0.63);
	
	-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
}
.button_p:active {
	background: rgba(23,216,75,0.87);
}
.port_imgs {
	float: left;
	/* margin-top: -10px */
}
.display_n {
	display: none;
}
.port_logos img{
    max-width: 200px;
    max-height: 200px;
    margin-left: 80px;
    margin-top: 30px;
	/*border: rgba(18,229,88,1.00) 1px solid;
	padding: 30px;
	border-radius: 150px; */
}
.port_banners {
	float: left;
}
.port_banners img {
	max-width: 200px;
    max-height: 200px;
    margin-left: 80px;
    margin-top: 30px;
}
body {
background: #3D3D3D;
}

<script>
$('#logo').click(function() {
    $('#port_logos').addClass('display_n');
	$('#port_banners').removeClass('display_n');
}); 
 </script>
 <button class="button_p"  id="logo">
  Logos	
  </button>
   
    
    <button class="button_p">
  	Banners
		</button>
    
      <button class="button_p">
  	Facebook
		 </button>
      <button class="button_p">
  	Outros
	 </button>
		 <p> clique na imagem para visualizar </p>
   </div>
   <div class="port_imgs">
   <div class="port_logos" id="port_logos"> 
   <img src="https://i.imgur.com/g62Lq6K.png">
   <img src="https://i.imgur.com/1oDuJ2n.png">
   <img src="https://i.imgur.com/5B1bmkq.png">
   	</div> <!-- fim port_logos -->
   	<div class="port_banners display_n" id="port_banners">
   		<img src="images/placeholder.jpg">
   	</div>
   </div><!-- fim port_imgs -->
 	
 </div> <!-- Fim portfolio -->

Answer 1

Just reference them by the same class, and with each verify whether display_n was set, also to have the control the id of the button must be contained in the class of images, example...

 $('.button_p').click(function() {

		var el = $(this).attr('id');
    
    $('.port').each(function(){
    	if($(this).hasClass(el)) {
      	$(this).removeClass('display_n');
      }else{
      	$(this).addClass('display_n');
      }
    })
}); 

.portfolio {
	padding-left: 25px;
	padding-right: 25px;
	display: inline-block;
	background-color:#090909;
	margin-top: 0px;
	width: 1298px;
	padding-bottom: 100px;
	
}
.portfolio h1 {
	color: rgb(226, 226, 226);
	font-size: 90px;
	text-align: center;
	
}
.box_button_port {
	width: 200px;
	margin-left: 50px;
	float: left;
}
.box_button_port p {
	color:aliceblue;
	font-size: 12px;
	margin-top:-10px;
}
.portfolio a { 
	text-decoration: none; 
}
.button_p {

	
	width: 126px;
	height: 46px;
	border: rgba(18,229,88,1.00) 1px solid;
	border-radius: 5px;
	background: none;
	color: white;
	font-size: 18px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	margin-bottom: 25px;
	cursor:pointer;
	
}
.button_p:hover {
	background:rgba(11, 236, 61, 0.63);
	
	-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
}
.button_p:active {
	background: rgba(23,216,75,0.87);
}
.port_imgs {
	float: left;
	/* margin-top: -10px */
}
.display_n {
	display: none;
}
.port_logos img{
    max-width: 200px;
    max-height: 200px;
    margin-left: 80px;
    margin-top: 30px;
	/*border: rgba(18,229,88,1.00) 1px solid;
	padding: 30px;
	border-radius: 150px; */
}
.port_banners {
	float: left;
}
.port_banners img {
	max-width: 200px;
    max-height: 200px;
    margin-left: 80px;
    margin-top: 30px;
}
body {
background: #3D3D3D;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ctnOpcoes">
       
       <button class="button_p" id="logo">
        Logos	
       </button>
       <button class="button_p" id="banner">
         Banners
       </button>
       <button class="button_p">
         Facebook
       </button>
       <button class="button_p">
         Outros
       </button>
       
     </div>
     
		 <p> clique na imagem para visualizar </p>

   <div class="port_imgs">
     <div class="port port_logos logo"> 
       <img src="https://i.imgur.com/g62Lq6K.png">
       <img src="https://i.imgur.com/1oDuJ2n.png">
       <img src="https://i.imgur.com/5B1bmkq.png">
     </div> <!-- fim port_logos -->
     <div class="port port_banners display_n banner">
       <img src="https://fakeimg.pl/300/">
     </div>
   </div><!-- fim port_imgs -->